I’ll try to keep this simple. I have a transparent header with a white logo, white MENU text, and white outline button overlaying a full bleed hero image (see image attached).
I’d like to have this header background turn to white and have the colors inverse when the user scrolls down the page. I’m able to get the inverse logo set in the logo settings (easy enough). And under Template settings for the Header template, I’m able to enable Sticky Header (but not scroll, as this makes the starting header bg white).
Does anyone know how I can get the text to change from white to the inverse color (#000) when scrolling? I’ve attached an image of where I am now - which is an inverse of the logo…but as you can see, the other text remains white.
Here is some sample code I also tried on a button.
%root%.scrolling .header-4__container .right-menu-items .book-button {
color: #ffffff;
background-color: #24365c;
}
You can see this live here – any help would be greatly appreciated!
Open Live Link:
https://frizzy-spark.localsite.io
If prompted, enter the information below.
Username: skyscraper
Password: hospitable
