Change header icons on hover and scroll

Store Design
, ,
1

Hello,

I would like to change my header design. My header is currently transparent with a white logo and icons when I’m at the top of the page and I’ve changed the code so that when I hover or scroll down, my logo changes to black and the header to white, but my icons are still white the whole time. How can I change them to turn black as well when I hover or scroll down? I have the Dawn theme. Thanks in advance for the help!

My shop: thefibery.com My password: Work26

2

Try this.

.header-wrapper:hover .header__icon{

color: #000000;

}

You can implement the scroll up from this

3

IDK how you are creating that effect, but if you doing it with JS, you can target the same method for all icons in the header with the selector `header > icon’ or is all icon have specific class name to target

4

This is what the code looks like. Where would I add the icon info that you sent? Thank you.

HTML .scrolled-past-header sticky-header, html sticky-header:hover { background: #fff; } HTML .scrolled-past-header sticky-header .header__heading-logo, html sticky-header:hover .header__heading-logo { filter: invert(1); background: transparent !important; }
5

This is what the code looks like in that section. Can I change it to affect the icons as well? Thank you.

HTML .scrolled-past-header sticky-header, html sticky-header:hover { background: #fff; } HTML .scrolled-past-header sticky-header .header__heading-logo, html sticky-header:hover .header__heading-logo { filter: invert(1); background: transparent !important; }
6

Try adding this coder after the last style:

HTML .scrolled-past-header sticky-header svg path {
    fill: black;
}
7
HTML .scrolled-past-header sticky-header, html sticky-header:hover { background: #fff; } html .scrolled-past-header sticky-header .header__heading-logo, html .scrolled-past-header sticky-header .header__icon, html sticky-header:hover .header__heading-logo, html sticky-header:hover .header__icon{ filter: invert(1); background: transparent !important; }

Try this out

8

Worked amazing. Thank you!