Dawn 13,0 megamenu dropdown is dissapearing after hovering

[Klipoorbellennl]

Hi, 

I managed to get the hover option in the coding. But now every time i hover over the menu and the drop down opens, when i try to move down with my cursor to the drop down menu, it closes again. Can someone help me? 

As i said, i used someone else's code to make the hover and i have Dawn 13.0 now.

Hope someone can help me out :-). My site is www.klipoorbellen.com in case you need to look! 

Thanks, 
Britt 

[tim · Accepted solution]

This happens because there is a gap between your menu item and corresponding drop-down.

When you move your mouse over this gap it leaves the trigger element and your theme code closes the drop-down.

You may try adding this CSS code to extend your trigger element to cover the gap:

header-menu [open] summary:after {
  content: "";
  position: absolute;
  top: 3em;
  height: 2em;
  left: -2em;
  right: -2em;
}

 Can add it right below the JS code you've added earlier:

<script>
  let items = document.querySelector(".header__inline-menu").querySelectorAll("details");
  console.log(items)
  items.forEach(item => {
    item.addEventListener("mouseover", () => {
      item.setAttribute("open", true);
      item.querySelector("ul").addEventListener("mouseleave", () => {
        item.removeAttribute("open");
      });
    item.addEventListener("mouseleave", () => {
      item.removeAttribute("open");
    });
  });
  
  });
</script>
<style>
 header-menu [open] summary:after {
  content: "";
  position: absolute;
  height: 2em;
  top: 3em;
  left: -2em;
  right: -2em;
 }
</style>

[Klipoorbellennl]

Oh my, you are literally my hero! 

Thank you so much! Is there anything i can do back for you? Give you a review or something? THANKS!

[shopsdoo]

Hi Tim. I'm having the exact same issue as the author. Could you please guide us as to where we add the codes you've mentioned? I tried adding the CSS code to the actual header section, custom css. Where should I add the JS code?

[tim]

I'd rather try using "Custom CSS" under "Theme settings". 

Do you have "show menu on hover" modification too?

[shopsdoo]

Amazing Tim. It's worked for me. I used a code from someone else to make the mega menu hover but as with the author, I couldn't have it stay open when going to the menu on Dawn theme. Its now worked with putting in the code you've mentioned under theme settings custom css. Thank you 🙂

[shopsdoo]

Hmm...for some reason it doesnt allow me to save now since the code. Comes up with online store editor cant be published

[tim]

Can you screenshot what you've changed and the message?

[shopsdoo]

[tim]

Interesting. I'd exit and try again.

Possibly happened due to someone else made changes at the same time or login timeout. 

[PassportEyewear]

I know this is an old question, but I ran into the same issue with my Mega Menu and the error when adding the code to the custom CSS.

I came across a fix after a bit of extra searching: the CSS needs to be added to the theme.liquid file instead, just before the {% endstyle %} tag
This saved for me and the mega menu now works as intended!

[elise_hewitt]

This worked like a charm for me as well!! Thank you so much for sharing!