how to create a hover effect for site header in squarespace 7.1

Site URL: https://www.roccofortehotels.com/hotels-and-resorts/hotel-de-russie/

Hi Everyone.

I am trying to find some custom code to create a hover affect for the entire header of a clients site. In this example, you can see when you hover over the menu, it changes from transparent to white, but also the font changes from white to black.

https://www.roccofortehotels.com/hotels-and-resorts/hotel-de-russie/

Thank you in advance for your help!

@Happygirl1 Hi! Can you share your site URL for context? 

Hi! The url is not live, building for a client, but this is what I am trying to create. https://www.roccofortehotels.com/hotels-and-resorts/hotel-de-russie/

I have built the header similar to this website with the header being adaptive with video. I have added color to the navigation so the menu items show, but I would either like to turn down the opacity or remove it all together if I can find a way to accomplish this.

Thank you!

On 9/15/2024 at 6:30 PM, Happygirl1 said:

Hi! The url is not live, building for a client, but this is what I am trying to create. https://www.roccofortehotels.com/hotels-and-resorts/hotel-de-russie/

I have built the header similar to this website with the header being adaptive with video. I have added color to the navigation so the menu items show, but I would either like to turn down the opacity or remove it all together if I can find a way to accomplish this.

Thank you!

You can use this to Website Tools > Custom CSS

header#header:hover {
	background-color: #fff !important;
}
header#header:hover svg {
	fill: #000 !important;
}
header#header:hover a.btn {
	background-color: #fff !important;
	color: #000 !important;
	border-color: #000 !important;
}
header#header:hover div.header-nav-item>a {
	color: #000 !important;
}

This is perfect!!!!! Thank you so much!!!