How To Add Drop Down On Hover – Updated for 9.0.0 Themes

This tutorial provides a step-by-step guide for adding hover functionality to drop-down menus in Shopify. The updated version of the tutorial ensures that the code works on the latest Shopify themes, specifically Dawn 9.0.0 Refresh 9.0.0 Sense 9.0.0, as well as any other themes that have been updated to version 9.0.0. The tutorial explains the process of adding the necessary code to a Shopify theme’s files and includes helpful screenshots and code snippets to guide users through the process. Whether you are a beginner or an experienced developer, this tutorial can help you create smoother and more user-friendly drop-down menus for your Shopify store.

Add Code in Header.liquid

Search for “Javascript” in header.liquid file and the following code above it

<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");
  });
});

if (dropdownItems !== null) {
  dropdownItems.addEventListener("mouseleave", () => {
    items.forEach(item => {
      item.removeAttribute("open");
    });
  });
}
</script>