CSS Help to change color of Header

Hello there,

On my site: https://activestatedesigns.squarespace.com (password: SiteTest) I have my header with custom Mega Menus setup.  Can I please get help with my CSS code to change the header div background to blue when anywhere on the div you hover over?  Also how do I shift the mega menu down so it's not overlapping with my logo?

I appreciate the help!

Lorne

Give this a try. 

.header .header-announcement-bar-wrapper:hover {
    background-color: var(--siteBackgroundColor); /*can change this to any color*/
}

.header-nav-folder-content {
    margin-top: 40px;
}

Awesome, thanks so much!

Actually, I have another question, when you hover over now that we shifted the mega menu down, it turns off because I leave the header link padding and can't get to the hover pop up.

Does that make sense?  You can test it out again to see it live.

Thanks!

Lorne

Just wanted to follow up on this.  Thanks!

On 1/30/2023 at 6:00 AM, Lorne17 said:

Actually, I have another question, when you hover over now that we shifted the mega menu down, it turns off because I leave the header link padding and can't get to the hover pop up.

Does that make sense?  You can test it out again to see it live.

 

Thanks!

Lorne

Try adding to Design > Custom CSS

.header-nav .header-nav-item--folder .header-nav-folder-content {
    margin-top: -5px;
}

@tuanphan, Thanks for this, however, that now puts the mega menu over my logo :(  

On 2/4/2023 at 7:19 AM, Lorne17 said:

@tuanphan, Thanks for this, however, that now puts the mega menu over my logo 😞

It looks like you changed Mega Menu layout?

It looks like this to me

On 2/8/2023 at 2:19 AM, tuanphan said:

It looks like you changed Mega Menu layout?

Sorry @tuanphan, I was missing a bracket when messing with the CSS below.  But the menu should look like my screenshot I previously posted. 

.header-nav .header-nav-item--folder .header-nav-folder-content {
  //off logo shuld be 39px but then you can't get to the menu;
    margin-top: 5px;
}

Thanks in advance!

Lorne

On 2/14/2023 at 11:35 AM, Lorne17 said:

Sorry @tuanphan, I was missing a bracket when messing with the CSS below.  But the menu should look like my screenshot I previously posted. 

.header-nav .header-nav-item--folder .header-nav-folder-content {
  //off logo shuld be 39px but then you can't get to the menu;
    margin-top: 5px;
}

Thanks in advance!

Lorne

It looks fine now. Did you solve it?

8 hours ago, tuanphan said:

It looks fine now. Did you solve it?

If you look to the left, it's still covering up the bottom part of my logo.  I guess I can deal with it if there's no CSS that can help shift it down, but not have a gap between the menu text and pop up mega menu?  Because when I did shift the position of mega menu down, then when you move your mouse to the mega menu it disappears because there's a gap between the menu link and the mega menu div.

On 2/16/2023 at 7:56 PM, Lorne17 said:

If you look to the left, it's still covering up the bottom part of my logo.  I guess I can deal with it if there's no CSS that can help shift it down, but not have a gap between the menu text and pop up mega menu?  Because when I did shift the position of mega menu down, then when you move your mouse to the mega menu it disappears because there's a gap between the menu link and the mega menu div.

Try adding to Design > Custom CSS

.header-nav-folder-content {
    margin-top: 20px !important;
}