Brooklyn Menu Hover Disappears

[Oatmealr]

https://period.shop/

We added a few more menu items, which lengthened the menu. On desktop, the hover menu for "shop" in the header works properly, but when you move your mouse to select the lowest item in the drop down menu the hover menu disappears. My only guess from inspecting the page is that the div containing the h1 header might be breaking the hover behavior. You can test this by opening the hover menu, scrolling the page down while the hover menu is still open, and you'll be able to select the last item in the menu. 

I've attempted to increase the z-index of the .site-nav__link and .site-nav__dropdown, which didn't work. I played when changing them from relative to absolute, which broke the menu and didn't fix it. I also tried making a negative z-index for p.h1. 

Anyone have a way to fix the hover disappearing for long menu items?

[Michael_Pink · Accepted solution]

HI @Oatmealr 
Thank you for your question. 
You can try follow this path:
Themes => edit code => asset => theme.scss.liquid
and add this code to bottom of the file theme.scss.liquid

.welcome-message {
z-index: 1;
}

[KetanKumar · Accepted solution]

@Oatmealr 

Sorry for facing this issue, it's my pleasure to help us.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.welcome-message {z-index: 1;}

[Oatmealr]

You da man, that was it! I was z-indexing the wrong stuff. 

Much appreciated!

[Oatmealr]

You're also da man. That worked!

[KetanKumar]

@Oatmealr 

it's My pleasure to help us