Jump to content

Make header solid colour on hover

Go to solution Solved by Ziggy,

Recommended Posts

I want my header to go a solid colour when you hover over it (not the text the banner as below)

This is the CSS I've tried. When I inspect element and click hover it works. But not on the actual site. Does anyone have any modifications?

#header > div.header-announcement-bar-wrapper > div.header-dropshadow:hover {
    /* Your hover styles here */
    background-color: #FFFCF9; /* Example: Change background color on hover */
}

 

image.png

Link to comment
  • Solution

This should work:

.header .header-announcement-bar-wrapper:hover {
  background-color: #FFFCF9;
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
5 hours ago, LuciLily said:

Thanks so so much!! that worked!

Yay, glad that worked!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.