How do I change the color of the text in the header on specific pages on the Debut theme?

Solved
New Member
4 0 0

So on my home page (debut theme), I the text in my header to be white, which is currently is. This text is over a dark picture, so it is easily visible. The rest of my site will have a white background, so when someone switches pages, say to the "contact" page. The text of the header is no longer visible. How would I go about changing the text of the header to black on all of the other pages, except the home page.

0 Likes
Excursionist
60 10 13

Hi andrewlittle96,

 

I might be able to help but I need to have a look at your store first. Reply to this post with your store's URL or send it to me via PM.

- Yes, we build Shopify Apps. Hit me with your idea: https://vellir.tech
- Let customers preview your products and easily add them to cart with Peek Mode
- Add free, good looking social share icons with built-in analytics to your store with Share Lab
0 Likes
New Member
4 0 0

spuroutdoors.com

0 Likes
Excursionist
60 10 13

From what I could see in your store, the font color has been globally changed to white. A better approach would be to revert the font color back to what it was and then just change the font color over your header banner.

 

Once you revert the font color changes I can then give you a code snippet to only change the font color in the homepage header.

- Yes, we build Shopify Apps. Hit me with your idea: https://vellir.tech
- Let customers preview your products and easily add them to cart with Peek Mode
- Add free, good looking social share icons with built-in analytics to your store with Share Lab
0 Likes
New Member
4 0 0

Alright that makes sense! I appreciate your input, you must be good at this stuff. I've gone ahead and changed the universal header color to black. What are the next steps I need to take?

0 Likes
Excursionist
60 10 13

The font is still white here for me. Can you double check?

- Yes, we build Shopify Apps. Hit me with your idea: https://vellir.tech
- Let customers preview your products and easily add them to cart with Peek Mode
- Add free, good looking social share icons with built-in analytics to your store with Share Lab
0 Likes

Success.

Hello @andrewlittle96,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

.site-header a, .site-header a:hover {
	color: #000;
}
.template-index .site-header a {
	color: #fff;
}

 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes