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.9/5 - (27 votes)

About

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

Leave a Comment

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