How To Open Header Menu Drop Down On Hover In Shopify (Dawn Theme)

Step 1: Go to Shopify admin > Online store > Themes.

Step 2: Open the 3 dot button and click edit code.

Step 3: Search global.js and open this file.

Step 4: Copy the below js code and paste it into the bottom of the global.js file.

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

});

Step 5: Save this file and open your site to see your changes.

Blog Detail