How can I modify the hover action in the Dawn theme header?

[Day204]

Hi! I am trying to change the hover action for the search and shopping bag icons in my header. Currently it is the default magnifying glass action. Could someone help me remove the hover action and make it so that the fill color changes when you hover over it? I am trying to replicate the hover action from the social icons in my footer.

I am using the Dawn theme and my website is www.day204clothing.com

Please let me know if you have any questions and your help is greatly appreciated!

[GabrielS · Accepted solution]

Hi there,

Adding the following CSS at the end of your base.css file should address your question:

.header__icon:hover .icon {
  transform: none !important;
  opacity: 0.5 !important;
}

Let me know if this fixed your issue.

Cheers!

[PageFly-Richard · Accepted solution]

Hi @Day204 .

I’m Richard Nguyen from PageFly- Free Landing Page Builder

You can go to Online store => themes => actions => edit code  and add this code on file base.css

.header__icon:hover .icon {
transform: unset !important;
opacity: 0.5 !important;
}

or

.header__icon:hover .icon {
transform: unset !important;
color: red !important;
}

Hope this answer helps.

Best regards,

Richard | PageFly

[GabrielS · Accepted solution]

Hi there,

Adding the following CSS at the end of your base.css file should address your question:

.header__icon:hover .icon {
  transform: none !important;
  opacity: 0.5 !important;
}

Let me know if this fixed your issue.

Cheers!

[PageFly-Richard · Accepted solution]

Hi @Day204 .

I’m Richard Nguyen from PageFly- Free Landing Page Builder

You can go to Online store => themes => actions => edit code  and add this code on file base.css

.header__icon:hover .icon {
transform: unset !important;
opacity: 0.5 !important;
}

or

.header__icon:hover .icon {
transform: unset !important;
color: red !important;
}

Hope this answer helps.

Best regards,

Richard | PageFly

[tarek_guma]

This worked! Thanks

[KetanKumar · Accepted solution]

@Day204 

yes, please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

.header__icon:hover .icon {
    opacity: 1 !important;
    color: #ffa500;
}