Different header text color in different pages

[Sougias]

Hello Shopify Community!

I am glad for being a member of yours.

With some code experience, not much, I tried working on having different header text colors in different pages, without getting any results. I have done a lot of research but nothing really comes up or works. I am good at listening at tutorials but the problem doesn't seem to fix. I also found the same question here, in the community, but the theme.css part of code isn't there because I use the DAWN theme.

I currently use a transparent header code that I found, which I want to keep, and works fine, but the text color is black and can't be seen very clearly. If I change the color scheme of the header, then all the pages have that color, something I don't want.

Can somebody help? It would be really nice.

Thank you

(my store)

[Tech_Coding]

Hello @Sougias 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

{% if template == 'index' %}
   <style>
      header ul.list-menu.list-menu--inline li a, span {
         color: #fff !important;
      }
   </style>

{% endif %}

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[Sougias]

That worked, but the dropdown menu text is also white with a white background. What can I do?

[Tech_Coding]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

{% if template == 'index' %}
  <style>
     a#HeaderMenu-catalog-men, a#HeaderMenu-catalog-women {
        color: #000 !important;
     }

     .header__menu-item .icon-caret{

         color: #fff !important;

    }
  </style>

{% endif %}

my reply helpful? Click Like to let me know!
your question answered? Mark My Both solutions as an Accepted Solution.

[Sougias]

That works too, but I noticed that prices don't show up, OR they are white and blend in with the background.

[Tech_Coding]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  span.price-item.price-item--regular {
     color: #000 !important;
  }
</style>

/*also add this code to make dropdown icon white*/

{% if template == 'index' %}
<style>
   details[open] > .header__menu-item .icon-caret {
      color: #fff !important;
   }
   .header__menu-item .icon-caret {
        color: #fff !important;
    }
</style>
{% endif %}

my reply helpful? Click Like to let me know!
your question answered? Mark My All Solutions as an Accepted Solution.

[Sougias]

[Tech_Coding]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  span.price-item.price-item--regular {
     color: #000 !important;
  }
</style>

/*also add this code to make dropdown icon white*/

{% if template == 'index' %}
<style>
   details[open] > .header__menu-item .icon-caret {
      color: #fff !important;
   }
   .header__menu-item .icon-caret {
        color: #fff !important;
    }
</style>
{% endif %}

my reply helpful? Click Like to let me know!

your question answered? Mark My All Solutions as an Accepted Solution.

[Sougias]

All nice again, it worked, but the announcement bar text is also white, as you can see in the photo. Can we do something about that?

[GTLOfficial · Accepted solution]

HEllo @Sougias 

Go to Admin -> Online store -> Theme > Edit code--->Find the file theme.liquid
Add this code before </body>

{%- if template.name == 'home' -%}
<style>
.header__menu-item {
color: crimson !important;
}
.header__icon {
color: crimson !important;
}
.header__active-menu-item {
color: crimson !important;
}
</style>
{%- endif -%}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[Sougias]

Edit: It worked! I made a small change to the home page to index and works fine, except for the white letters in the dropdown menu, which I may already have a solution for

[Sougias]

Everything works fine! I did a bit of coding myself too and problem solved. Thank you very much!

(This is the code I used at the end to make everything work as planned)

    {% if template == 'index' %}
  <style>
.header__menu-item {
color: white !important;
}
.header__icon {
color: white !important;
}
.header__active-menu-item {
color: white !important;
}
     a#HeaderMenu-catalog-men, a#HeaderMenu-catalog-women {
        color: #000 !important;
     }
     .header__menu-item .icon-caret
         color: #fff !important;
    }
  </style>

{% endif %}

[GTLOfficial]

Happy to help you.