Shopify: Add hover to dawn mega menu

Posted on October 6, 2022 by jamie

Open your site’s header.liquid file (should be located in the sections folder

On around line 500 you will see a liquid tag referring to sticky headers, after this line copy the following code (it’s a simple script that adds hover eventListeners to all menu items that create dropdowns)

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


https://www.youtube.com/watch?v=-oz3hgI09bk