hover over navigation to to dropdown Sence theme

[medusasmakeup]

I would like to make the navigation drop down automatically when hovered over (opposed to clicking) I am using the sense theme.

I did try some code from the community for the Dawn theme, it did work, however it would also disappear before your could click anything from the menu.

https://medusasmakeup.com/

[PageFly-Noah]

Hi @medusasmakeup 

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

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

Hope this can help you solve the issue 

Best regards,

Noah | PageFly

[medusasmakeup]

Thanks for replying. I wasn't able to get this code to work.

[PageFly-Noah]

Can you screenshot where you added this code? I cannot see the code, if its was added i can debug it on your site.

[medusasmakeup]

I appreciate any insight you may have.