The site I’m building has a transparent header. I’m using a white box in the header that is hidden on load, but appears when the user scrolls down to the second section on the page.
When the page loads, everything in the header is white. After users scroll down to the next section, I want my cart icon, member login icon, and horizontal menu to change to blue.
I’m using this method to change the color of my svg logo in the header from white to blue, but it doesn’t seem to work for the other elements in my header. (It works on buttons and hamburger menus but I don’t have either in my header)
I thought about using, for instance, two cart icons — one white and one blue — and placing the blue one on top of the white one. Then making each icon show or hide based on if the second section is in the viewport. I suppose this will work but I’m hoping for a way to just code a change in the color, rather than using twice the number of icons.