Solved

Dawn 13,0 megamenu dropdown is dissapearing after hovering

Klipoorbellennl
Excursionist
24 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 Expert
3162 203 1154

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>

 

View solution in original post

Replies 2 (2)

tim
Shopify Expert
3162 203 1154

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>

 

Klipoorbellennl
Excursionist
24 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!