How to Show dropdown menu Open on hover in Shopify Dawn Theme

You can follow this instruction to make dropdown menu of Shopify Dawn theme and other free 2.0 Shopify's themes open on hover instead of clicking menu. Please follow these steps.

• Login to your Shopify store

• Online store > Themes > Edit code

Open theme.liquid file, copy and paste this code below before </body> element and save the file.

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");

});

});

});