How can I change the icon color to black when hovering over the header?

[swoo0105]

The hovering function is applied to text, but the hovering function is not applied to the search icon and cart icon.
How can I change the color of both icons to black when hovering over the header?

lgbtqstyles.com // mohtse

[PageFly-Kate · Accepted solution]

Hi @swoo0105 ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the bottom of the file:

.header:hover .header__icon .icon {
    color: black;
}

 Hope my answer will help you!

[PageFly-Kate · Accepted solution]

Hi @swoo0105 ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the bottom of the file:

.header:hover .header__icon .icon {
    color: black;
}

 Hope my answer will help you!

[GemPages · Accepted solution]

Hello @swoo0105 ,

You can follow these steps: 
1. Go to Online Store->Theme->Edit code

2. Open your theme.liquid file, paste the below code before </body>

    <style>
       .header-wrapper--border-bottom:hover .header__icon .icon {
            color: #000 !important;
        }
    </style>

I hope the above is useful to you.

Kind & Best regards, 
GemPages Support Team