How to do a hover menu on dawn

[JGBowie]

How Do i put a hover menu on dawn theme 

https://nymiff-pm.myshopify.com/ 

Password is Landon24

[Dan-From-Ryviu]

Hi @JGBowie 

You can try adding this code to the theme.liquid file, before </body> tag and check again. 

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

[JGBowie]

didnt work

[Dan-From-Ryviu]

Did you save file after adding code? Could you take a screenshot of where you added the code? 

[JGBowie]

[Dan-From-Ryviu]

Did you save the file? Because I cannot see the code when viewing your site's HTML source.

[JGBowie]

I deleted it out because it didnt work

[_Ecom_Boss]

Hello @JGBowie 

Here is the steps 

1. Go to online store > edit code
2. open header.liquid or componet -menu-drawer.liquid depending on menu type.
3. add css code to make the menus open hover:

.header__menu-item:hover .header__submenu {
display: block;
opacity: 1;
visibility: visible;
}

4. You may need to adjust the submenu's default css to set display: none and opacity: 0 so it only appear on hover.

if you'dlike i can guid you with the exact code depending on which menu level you're targeting.

[tapan_sain]

Hello @JGBowie 

You can enable a submenu on hover by adding a simple code. Please paste the following code at the end of your header.liquid file and save the changes. After that, the submenu in the header will appear when you hover over the respective item.

<script>
    let items = document.querySelector(".header__inline-menu").querySelectorAll("details");
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>

[JGBowie]

This doesn't stay hovered it closes when you go to click something in menu