Make logo/links/icons white on transparent navbar and then invert to black on scroll

Site URL: https://ostendclothing.com/home-1

I am trying to achieve a navbar that works like this: https://sirplus.co.uk/

17 hours ago, cstraw said:

Site URL: https://ostendclothing.com/home-1

I am trying to achieve a navbar that works like this: https://sirplus.co.uk/

... where the logo/links/icons are white on landing and then invert to black on scroll and stay black on all other pages.

 

Here is the website: https://ostendclothing.com/home-1

Password: linen

 

Thanks

Add to Home-1 Page Header

  <style>
header#header:not(.shrink) * {
    color: white;
}
header#header:not(.shrink) img {
    filter: invert(1);
    -webkit-filter: invert(1);
}
header#header:not(.shrink) .icon {
    filter: brightness(0) invert(1);
}
</style>

@tuanphan Thanks so much!!

@tuanphan How do I make sure the "+" menu button on my mobile site does the same? thanks

On 5/17/2021 at 11:38 PM, cstraw said:

Site URL: https://ostendclothing.com/home-1

I am trying to achieve a navbar that works like this: https://sirplus.co.uk/

... where the logo/links/icons are white on landing and then invert to black on scroll and stay black on all other pages.

 

Here is the website: https://ostendclothing.com/home-1

 

Thanks

The url doesn't exist. Can you check again?