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");
  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>
4.8/5 - (9 votes)

About

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

  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!

Leave a Comment

Your email address will not be published.