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");
});
});
});
You are done. Open your store and check how it works now