Dawn 13,0 megamenu dropdown is dissapearing after hovering

Solved

Dawn 13,0 megamenu dropdown is dissapearing after hovering

Klipoorbellennl
Excursionist
31 0 4

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 

Accepted Solution (1)

tim
Shopify Partner
3911 395 1440

This is an 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.

Screenshot 2024-02-07 at 1.42.57 pm.png

 

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;
}

Screenshot 2024-02-07 at 2.03.03 pm.png

 

 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>

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

View solution in original post

Replies 10 (10)

tim
Shopify Partner
3911 395 1440

This is an 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.

Screenshot 2024-02-07 at 1.42.57 pm.png

 

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;
}

Screenshot 2024-02-07 at 2.03.03 pm.png

 

 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>

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
Klipoorbellennl
Excursionist
31 0 4

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
New Member
4 0 0

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
Shopify Partner
3911 395 1440

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

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

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
shopsdoo
New Member
4 0 0

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
New Member
4 0 0

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

tim
Shopify Partner
3911 395 1440

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

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
shopsdoo
New Member
4 0 0

Screenshot 2024-06-07 104449.jpg

tim
Shopify Partner
3911 395 1440

Interesting. I'd exit and try again.

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

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
PassportEyewear
Visitor
1 0 0

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!

 

Screenshot (2).png