Sougias
September 18, 2024, 10:59am
1
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)
Hello @Sougias
You can add code by following these steps
Go to Online Store → Theme → Edit code.
Open your theme.liquid file
Paste the below code before on theme.liquid
{% if template == ‘index’ %}
header ul.list-menu.list-menu--inline li a, span {
color: #fff !important;
}
{% endif %}
my reply helpful? Click Like to let me know! your question answered? Mark it as an Accepted Solution.
Sougias
September 18, 2024, 11:27am
3
That worked, but the dropdown menu text is also white with a white background. What can I do?
HEllo @Sougias
Go to Admin → Online store → Theme > Edit code—>Find the file theme.liquid
{%- if template.name == 'home' -%}
{%- endif -%}
result
If this was helpful, hit the like button and accept the solution.
You can add code by following these steps
Go to Online Store → Theme → Edit code.
Open your theme.liquid file
Paste the below code before on theme.liquid
{% if template == ‘index’ %}
a#HeaderMenu-catalog-men, a#HeaderMenu-catalog-women {
color: #000 !important;
}
.header__menu-item .icon-caret{
color: #fff !important;
}
{% endif %}
my reply helpful? Click Like to let me know! your question answered? Mark My Both solutions as an Accepted Solution.
Sougias
September 18, 2024, 11:45am
6
That works too, but I noticed that prices don’t show up, OR they are white and blend in with the background.
You can add code by following these steps
Go to Online Store → Theme → Edit code.
Open your theme.liquid file
Paste the below code before on theme.liquid
span.price-item.price-item--regular {
color: #000 !important;
}
/also add this code to make dropdown icon white /
{% if template == ‘index’ %}
details[open] > .header__menu-item .icon-caret {
color: #fff !important;
}
.header__menu-item .icon-caret {
color: #fff !important;
}
{% endif %}
my reply helpful? Click Like to let me know! your question answered? Mark My All Solutions as an Accepted Solution.
You can add code by following these steps
Go to Online Store → Theme → Edit code.
Open your theme.liquid file
Paste the below code before on theme.liquid
span.price-item.price-item--regular {
color: #000 !important;
}
/also add this code to make dropdown icon white /
{% if template == ‘index’ %}
details[open] > .header__menu-item .icon-caret {
color: #fff !important;
}
.header__menu-item .icon-caret {
color: #fff !important;
}
{% endif %}
my reply helpful? Click Like to let me know!
your question answered? Mark My All Solutions as an Accepted Solution.
Sougias
September 18, 2024, 12:12pm
10
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?
Sougias
September 18, 2024, 12:28pm
11
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
September 18, 2024, 12:43pm
12
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' %}
{% endif %}
