Fix header when overing or clicking menu back to BLACK

[1989streetwear]

Hello,

I have recently followed a tutorial video from youtube to make the header transparent on Dawn 8.0

https://www.youtube.com/watch?v=feuDG6igGDk&lc=Ugy-agV39tqeyE-Bxzd4AaABAg.9nMSRBGqWzc9nMh6IjGQUe

The code works great and perfectly on both desktop and mobile (mobile is GREAT), but I will need some fixing on DESKTOP because I am using the mega menu, and when the mega menu items are hovered/clicked and the menu opens, the header stays transparent. Please check the attached screenshots for reference.

If possible I would need one of these 2 solutions:

1) The header goes back to BLACK as soon as the cursor hover on the header
2) The header goes back to BLACK as soon as the cursor hover/clicks on any of the parent items of the menu (WOMEN/MEN/UNISEX)

Website: 1989streetwear.com
Password: bet1989

[PageFly-Victor]

Hi @1989streetwear ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea for the  1 solution:

Step 1. Go to Online Store -> Theme -> Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before </body> :

<style>
header#site-header:hover {
    background: black;
    max-width: 1920px !important
}

</style>

Hope my answer will help you.

Best regards,

Victor | PageFly

[1989streetwear]

Hi @PageFly-Victor thank for you reply

this code kind of works but it changes the position of the logo and the search, account and cart icons to the edges of the page

[PageFly-Victor · Accepted solution]

You can remove my previous code and try this code below:

<style>
header#site-header:hover {
    background: black;   
}

.header-wrapper:hover {
    height: 76px;
}
</style>

[1989streetwear]

Thank you

I am using just this in my custom css file.

.header#site-header:hover {

   background: black;

}

The height also plays with the header when you scroll down the page and you try to hover it.