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

[tobyh4]

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

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

[Moeed]

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:

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

Best Regards,
Moeed

[tobyh4]

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.

Before scroll ^^

After scroll ^^