Want a white header on hover (currently have a transparent one)

Store Design
,

Topic summary

A user implemented a transparent header using code from a tutorial but needed help adding a hover effect to make the header background turn white.

Initial Solution Attempt:

  • First suggestion was to add CSS code to the theme.liquid file above the closing tag
  • This approach didn’t work for the user

Working Solution:

  • The corrected CSS code was provided:
header#site-header:hover {
    background: white !important;
}
  • This code should be pasted at the bottom of the base.css file instead
  • The solution successfully resolved the issue

Technical Context:

  • Theme: Dawn (Shopify)
  • Implementation involves editing theme files through Online Store > Edit Code
Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

I currently have a transparent header based of the code on this website. https://websensepro.com/blog/transparent-header-in-dawn-theme-10

I need help adding an on-hover effect onto the header. I want the header to have a white background when hovering over it. I am currently on the dawn theme.

Thank you

https://sbfut8bwl759nb3t-78682521917.shopifypreview.com

2

Hi, @bee-woo .

Go to Online Store
2) Edit Code
3) Find theme.liquid file

  1. Add the following code in the bottom of the file above tag.
header#site-header:hover {
    background: white;
}
3

Hi @websensepro ,

i tried that code but it didn’t seem to work for me

Screenshot 2023-12-05 at 12.48.07 am.png
Screenshot 2023-12-05 at 12.48.07 am.png1842×508 59.1 KB

4

Try This Code.

header#site-header:hover {
    background: white !important;
}

And paste the base.css file very bottom.

5

Thank you so much it worked