How To Show Drop Down on Hover in Dawn Theme

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)

About

15 thoughts on “How To Show Drop Down on Hover in Dawn Theme”

  1. 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!

      1. 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?

  2. 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!

  3. 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.

  4. 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.

Leave a Comment

Your email address will not be published. Required fields are marked *