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

Store Design
,

Topic summary

Goal: Change the hover behavior of the header search and cart icons in the Dawn theme—remove the default transform/magnifying effect and instead change the icon color on hover (matching footer social icons).

What was done:

  • Edit theme code: Online Store → Themes → Actions → Edit code → Assets → base.css. Add custom CSS at the bottom.
  • Suggested CSS variants (all target the header icon on hover):
    • Disable transform and dim icon: .header__icon:hover .icon { transform: none/unset !important; opacity: 0.5 !important; }
    • Disable transform and change color: .header__icon:hover .icon { transform: unset !important; color: red !important; }
    • Keep full opacity and set a specific color: .header__icon:hover .icon { opacity: 1 !important; color: #ffa500; }

Notes:

  • The key is overriding the hover state of .header__icon .icon to stop the default animation and apply desired color/opacity.
  • A screenshot was shared but not required to implement the fix.

Outcome/Status:

  • The provided CSS resolved the issue. Thread appears resolved with no outstanding questions.
Summarized with AI on December 14. AI used: gpt-5.
1

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!

Screenshot 2022-10-31 at 10.16.28 PM.png

1 Like
2

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!

1 Like
3

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

2 Likes
4

@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;
}
1 Like
5

This worked! Thanks