Change Header Icons And Text To White

tobyh4
Excursionist
30 0 4

Hi,

 

I have a transparent header on my homepage and I am trying to make the icons, text and logo in my header white on the homepage before scroll, then turn black as soon as you scroll, so they turn black at the same time the sticky header pops up. At the moment, they are black all the time and I have only managed to make them either white all the time of black all the time. 

 

The link to the white version of the logo is: https://cdn.shopify.com/s/files/1/0795/4864/5720/files/MAURICIOBENYAR_5.png?v=1699902401

 

The link to my shopify store is: https://mauriciobenyar.myshopify.com/

 

The theme is: Dawn 12.0.0

 

Screenshot 2024-01-21 at 17.40.42.png

This is what the header currently looks like before scrolling, I am trying to make all of the icons and text white here,

 

Would really appreciate any help,

Thanks in advance

Replies 2 (2)

Moeed
Shopify Partner
3531 890 1105

Hey @tobyh4 

 

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

<style>
sticky-header.header-wrapper.color-background-1.gradient {
    background: black !important;
}
img.header__heading-logo.motion-reduce {
    filter: invert(1) !important;
}
.list-menu.list-menu--inline span, .tmenu_submenu.tmenu_submenu_type_automatic.tmenu_submenu--desktop {
    color: white !important;
}
.header__icon .icon {
    color: white !important;
}
</style>

RESULT:

Moeed_0-1705860144740.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 developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Canva to Shopify in clicks - Free App
tobyh4
Excursionist
30 0 4

Hi,

 

Appreciate the quick reply. This has changed not changed the menu text to white, only the icons and logo. It has also made the header turn black on scroll and the icons stay white.

 

I will attach a pictures to show what I mean.

Screenshot 2024-01-21 at 18.02.19.png

Before scroll ^^

 

Screenshot 2024-01-21 at 18.02.35.png

After scroll ^^