How can I permanently change my header text color to black?

Store Design
,
1

i want to change the color of my headers menu to black cause when im in top the color is white ans when i scroll down the color is black . i want the text black sll the time

2B50A39C-C37B-45CD-B000-C869F5CFAE99.jpeg
2B50A39C-C37B-45CD-B000-C869F5CFAE99.jpeg3024×4032 1.67 MB

2

To change the color of your header menu text to black all the time, you can add some custom CSS to your website’s code. Here’s an example of CSS code that you can use:

css
.site-header__link { color: black !important; }

 

This code targets the link elements in your header menu and sets the text color to black using the color property. The !important declaration ensures that this style is applied even if there are other styles that try to override it.

You can add this code to your Shopify theme’s CSS file. Here are the steps to do so:

  1. From your Shopify admin panel, click on “Online Store” and then “Themes”.
  2. Click on the “Actions” button for your current theme, and then select “Edit code”.
  3. In the left-hand sidebar, click on the “Assets” folder to expand it, and then click on your theme’s CSS file (usually named “theme.scss.liquid”).
  4. Add the CSS code at the bottom of the file, and then click “Save” to apply the changes.

After you’ve saved the changes, the text color of your header menu should be black all the time. If you need further assistance, feel free to let me know!

3

@Nikoscapone ,

Please share the store URL, so that I can give the solution.

4

Hello @Nikoscapone ,

Can you give me your Store URL( with pass if your store password is enabled) so I can check it for you?

Kind & Best regards,
GemPages Support Team

5

https://pawsbuddys.myshopify.com

pass nikos

6

@Nikoscapone

a.site-nav__link {
    color: #000 !important;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

7

Hello [email removed]

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1677226901998.png
GemPages_0-1677226901998.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1677226929441.png
GemPages_1-1677226929441.png1367×901 73.9 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

8

Hi @Nikoscapone ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.scss.css->paste below code at the bottom of the file:

.transparent-header--desktop .site-header .site-nav__link, .transparent-header--desktop .site-header .site-header__logo-link, .transparent-header--desktop .dbtfy-menu_bar .menu-bar__link {
    color: #212529;
}

Hope my answer will help you.

Best regards,

Victor | PageFly