Change menu and logo colour in header for homepage and rest of the site (Dawn theme)

Solved

Change menu and logo colour in header for homepage and rest of the site (Dawn theme)

NoraPinpiri
Tourist
3 0 1

Hey, I've been building my site for a while now and I want to have my menu and logo in white for my homepage (as I have an image banner) but on my other pages I would like the menu and logo black.

I've changed it to white now, but obviously on all the other pages it doesn't show up as the background colour is white also.

 

There's also a bit of a difficulty factor in it, as my header is transparent, not sure if this will alter anything. (I've made the header tranparent by using a custom code I found on these threads to enable transparent header.

 

Screenshot 2024-06-30 at 17.51.00.pngScreenshot 2024-06-30 at 17.51.14.png

Accepted Solution (1)
Moeed
Shopify Partner
4309 1107 1356

This is an accepted solution.

Hey @NoraPinpiri 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

{% if template.name != "index" %} 
<style>
.header__heading-logo {
    filter: invert(1) !important;
}
.list-menu__item span {
    color: black !important;
}
.header__icon, .header__icon--cart .icon {
    color: black !important;
}
</style>
{% endif %}

RESULT:

Moeed_0-1719774703840.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

Replies 6 (6)

Made4uo-Ribe
Shopify Partner
6841 1633 2013

Hi @NoraPinpiri 

If your header color black on default and you change it on the homepage by white color. Check this. 

{% if template == 'index' %}
<style>
/* add the custom code here, example: .header {
color: white; 
} */
</style>
{% endif %}

And Paste it on the theme.liquid. 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

Moeed
Shopify Partner
4309 1107 1356

Hey @NoraPinpiri 

 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
NoraPinpiri
Tourist
3 0 1

Hey @Moeed 

 

yeah sure, I got a temporary link for now that I will change eventually, but here's the link: https://976d80-d2.myshopify.com/

Moeed
Shopify Partner
4309 1107 1356

This is an accepted solution.

Hey @NoraPinpiri 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

{% if template.name != "index" %} 
<style>
.header__heading-logo {
    filter: invert(1) !important;
}
.list-menu__item span {
    color: black !important;
}
.header__icon, .header__icon--cart .icon {
    color: black !important;
}
</style>
{% endif %}

RESULT:

Moeed_0-1719774703840.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
NoraPinpiri
Tourist
3 0 1

Thanks  @Moeed, it solved my problem thank you very much!

Moeed
Shopify Partner
4309 1107 1356

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️