How to change header icons and text to white on homepage before scrolling?

30 0 5



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:


The link to my shopify store is:


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)

Shopify Partner
3793 958 1189

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

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;




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


Best Regards,

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. ❤️
30 0 5



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 ^^