How to Make Mega-Menu Open on Hover over Menu Item in Trade Theme

[jordanbford1]

Hi!

How do I make my mega-menu appear when hovering over my main menu item with my mouse? Right now I am currently having to click to make the mega-menu to appear and I hate it. 

Here is my website.

[Dan-From-Ryviu]

Hi @jordanbford1 

You can try to add this code to theme.liquid file before </body> tag and check if it work

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const inlineMenu = document.querySelector(".header__inline-menu");
    const detailsItems = inlineMenu.querySelectorAll("details");
  
    detailsItems.forEach(item => {
      const ulElement = item.querySelector("ul");
  
      item.addEventListener("mouseover", () => {
        item.setAttribute("open", true);
  
        ulElement.addEventListener("mouseleave", () => {
          item.removeAttribute("open");
        });
  
        item.addEventListener("mouseleave", () => {
          item.removeAttribute("open");
        });
      });
    });
    });
</script>