Dawn Theme 14.0.0 - How to make the menu open on hover?

[MTSD]

Is there a way to make the menus open when the mouse hovers over it?

This solution doesn't work: https://community.shopify.com/c/shopify-design/dawn-theme-how-to-add-the-ability-to-hover-over-dropd...

[Benjamen]

Hello,
I'm not a coder, so I have to do things the app way, if you're still looking for a coding solution I'm sure some nice coding-wizard will come along soon 😊
Anyway, I'd be using Meteor Mega Menu, because that would allow you to use images in addition to descriptions. I'd look at the demo store to see if a template would be suited to your needs: https://meteor-sneakers.myshopify.com/ 
Have a great day, and I hope this helped. 

[ZestardTech]

Hi @MTSD 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find layout > theme.liquid and paste this at the bottom of the file:

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