Shopify: Add hover to dawn mega menu
Posted on October 6, 2022 by jamie
Open your site’s header.liquid file (should be located in the sections folder
On around line 500 you will see a liquid tag referring to sticky headers, after this line copy the following code (it’s a simple script that adds hover eventListeners to all menu items that create dropdowns)
<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>
https://www.youtube.com/watch?v=-oz3hgI09bk