In this post, I’ll show you how to show a drop-down menu on hover in the Dawn theme. This is a great way to add functionality to your website and make it more user-friendly.
This is a great way to provide more information to your viewers without taking up too much space on your page.
A great way to add some interactivity to your page and make it more user-friendly.
Add the following code in header.liquid on line number 603:
<script>
let items = document.querySelector(".header__inline-menu").querySelectorAll("details");
let dropdownItems = document.querySelector(".header__submenu");
items.forEach(item => {
item.addEventListener("mouseenter", () => {
item.setAttribute("open", true);
let ulElement = item.querySelector("ul");
if (ulElement !== null) {
ulElement.addEventListener("mouseleave", () => {
item.removeAttribute("open");
});
}
});
item.addEventListener("focus", () => {
item.setAttribute("open", true);
});
item.addEventListener("blur", () => {
item.removeAttribute("open");
});
item.addEventListener("mouseenter", () => {
item.setAttribute("open", "");
});
item.addEventListener("mouseleave", () => {
item.removeAttribute("open");
});
});
if (dropdownItems !== null) {
dropdownItems.addEventListener("mouseleave", () => {
items.forEach(item => {
item.removeAttribute("open");
});
});
}
</script>
4.8/5 - (30 votes)
15 thoughts on “How To Show Drop Down on Hover in Dawn Theme”
Hi there! Thank you so much for sharing this! It hovers open the menu, but as soon as you hover over to a link, the menu closes and you cannot click any link. Will you be able to provide an updated version? Thank you very much!
Which theme you applied the code into, can you share more details pls
Hi, I use dawn and have the same problem – the hover closes rapidly. Any ideas how to make it a bit more persistent, lets say 1 second or so?
Tutorial for Dawn 8.0 is in progress. Stay tuned
Thanks for your efforts to update the codes.
Your welcome
This is the same for me. Dawn version 7.0
That’s weird we tested in Shopify 7.0.1 and its working fine.
What if I want the main Menu to open on click.
The submenu appears (great), but I want to click on main item and visit it.
Thanks!
Will need to add a condition in JS code for that
Hello thanks for the tutorial video. It works.
Now my problem is when I try to click on the submenu items, the dropdown disappear. any advice ?
running dawn 7.01.
Tutorial for dawn 8.0 is in progress. Stay tuned
Works fine on Studio theme version 9.0.0
hi there, similar problem in dawn version 11.0.0
Code was pasted in, but similar problems as highlighted earlier; The menu appears when hovering over, but as soon as you slightly move down, the menu closes again and nothing can be selected.
Is it possible to update the code? thanks.
Try now