Header Navigation Hover Effect Disappears Too Quickly

[villabodrum]

I am using the Dawn theme and I added custom code to be able to hover over my navigation menu but on one of the selections the menu closes before i can select the option. How can i fix this?

[SafeerAhmed]

can you please share your preview url

[villabodrum]

https://ekety5-vj.myshopify.com/

It's specifically the gifting section. 

Here is the code I added for the hover function for navigation in dawn theme

header.liquid lines 305-320

[tim]

Hard to tell without seeing the problem, but can be similar to this one: https://community.shopify.com/c/shopify-design/dawn-13-0-megamenu-dropdown-is-dissapearing-after-hov... 

[villabodrum]

Hi Thank you! I tried your solution but it didn't work.

Here is my store 

https://ekety5-vj.myshopify.com/

It's specifically the gifting section. 

Here is the code I added for the hover function for navigation in dawn theme

header.liquid lines 305-320

[tim]

Ah, you mean you can't reach "Shop by price"!

Your problem is different from the one I guessed before seeing your site.

It is not as easy to fix -- when you hover over your second level submenu header and third level menu opens, the dropdown becomes taller. As  the mouse moves down and leaves this third level menu it closes, making dropdown shorter again and now your mouse is no longer over the menu at all...

One simple solution is have no 3rd level menus at all.

However, I think the good one can be to use CSS like this:

.header__submenu details{
  position:relative;
}
.header__submenu details ul {
  position: absolute !important;
  left: 90%;
  top: -1em;
  width: 100%;
  border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
  border-style: solid;
  border-width: var(--popup-border-width);
  box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) 
    var(--popup-shadow-blur-radius) rgba(var(--color-shadow), var(--popup-shadow-opacity));
  background: rgb(var(--color-background)) !important;
}

This will make submenus cascade and prevent main dropdown from changing height:

[villabodrum]

Hi Tim! Thank you for your code - can you tell me if your code goes to a specific CSS? and does it go to any specific line?

[tim · Accepted solution]

Try adding it to the "Online Store"=> "Customize"=> "Theme Settings"=> "Custom CSS" setting.

[villabodrum]

Thank you 🙂 it worked

[tim]

Happy to hear. Would appreciate the like then.