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

Solved

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

swoo0105
Excursionist
25 0 4

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

Accepted Solutions (2)

PageFly-Kate
Shopify Partner
1203 346 361

This is an 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!

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 
➜ Weekly updated Shopify tutorials on YouTube 


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

GemPages
Shopify Partner
5625 1261 1231

This is an accepted solution.

Hello @swoo0105 ,

 

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

GemPages_0-1676428104528.png

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

GemPages_1-1676428148194.png

    <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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Replies 2 (2)

PageFly-Kate
Shopify Partner
1203 346 361

This is an 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!

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 
➜ Weekly updated Shopify tutorials on YouTube 


All features are available from Free plan. Live Chat Support is available 24/7.

GemPages
Shopify Partner
5625 1261 1231

This is an accepted solution.

Hello @swoo0105 ,

 

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

GemPages_0-1676428104528.png

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

GemPages_1-1676428148194.png

    <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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center