Want personalized guidance adding this to your store?

Check out our Insiders community: https://www.skool.com/the-prompted

Members of The Prompted community receive a detailed store audit, 1-on-1 guidance for implementing new features, and access to an exclusive theme. You'll also get marketing support, the same tactics we use to spend over $100k/mo on Meta Ads.

---

In this customization, we’re adding a hover effect to our navigation menus. This is a nice way to give your customers a more interactive experience and when paired with images can really help show off your store’s visuals.

Compatible Themes: This code should work on all free Shopify themes (Dawn, Refresh, Craft, Studio, Publisher, Crave, Origin, Taste, Colorblock, Sense, Ride, Spotlight).

 

Edit Theme Code

Add new setting in header.liquid schema

{
  "type": "checkbox",
  "id": "menu_hover",
  "label": "Open menu with hover (dropdown and megamenu only)",
  "default": false
},

Add hover effect to the mega menu code

Create new asset megamenu-hover.js

document.addEventListener('DOMContentLoaded', function() {
  const menuItems = document.querySelectorAll('.header__inline-menu > ul > li');
  let activeMenuItem = null; 
  menuItems.forEach((item, index) => {
    const detailsElement = item.querySelector('details');
    if (!detailsElement) {
      return;
    }
    item.addEventListener('mouseenter', () => {
      if (activeMenuItem && activeMenuItem !== item) {
        const previousDetailsElement = activeMenuItem.querySelector('details');
        if (previousDetailsElement) previousDetailsElement.removeAttribute('open');
      }
      detailsElement.setAttribute('open', true);
      activeMenuItem = item; 
    });

    item.addEventListener('mouseleave', () => {
      setTimeout(() => {
        if (!item.matches(':hover')) {
          detailsElement.removeAttribute('open');
          if (activeMenuItem === item) activeMenuItem = null; 
        } 
      }, 500); // Adjust delay as needed
    });
  });
});

Add js file at end of header-mega-menu.liquid

{%- if section.settings.menu_hover -%}
  <script src="{{ 'megamenu-hover.js' | asset_url }}" defer="defer"></script>
{%- endif -%}

Add hover effect to the dropdown menu code

Create new asset header-dropdown-hover.js

document.addEventListener('DOMContentLoaded', function() {
  let openMainMenu = null; 
  const handleMenuOpening = (detailsElement, isSubMenu = false) => {
    if (!isSubMenu) {
      if (openMainMenu && openMainMenu !== detailsElement) {
        openMainMenu.removeAttribute('open');
      }
      detailsElement.setAttribute('open', '');
      openMainMenu = detailsElement;
    } else {
      detailsElement.setAttribute('open', '');
    }
  };
  const mainMenuDetails = document.querySelectorAll('.header__inline-menu > ul > li > header-menu > details');
  mainMenuDetails.forEach(detailsElement => {
    const summaryElement = detailsElement.querySelector('summary');
    summaryElement.addEventListener('mouseenter', function() {
      handleMenuOpening(detailsElement);
    });
    detailsElement.addEventListener('mouseleave', function() {
      setTimeout(() => {
        if (!detailsElement.matches(':hover')) {
          detailsElement.removeAttribute('open');
          if (openMainMenu === detailsElement) {
            openMainMenu = null;
          }
        }
      }, 1000); // Delay in ms
    });
  });
  const submenuDetails = document.querySelectorAll('.header__submenu details');
  submenuDetails.forEach(detailsElement => {
    const summaryElement = detailsElement.querySelector('summary');
    summaryElement.addEventListener('mouseenter', function(event) {
      event.stopPropagation(); 
      handleMenuOpening(detailsElement, true); 
    });
    detailsElement.addEventListener('mouseleave', function() {
      setTimeout(() => {
        if (!detailsElement.matches(':hover')) {
          detailsElement.removeAttribute('open');
        }
      }, 1000); // Adjust delay as needed
    });
  });
});

Add js file at end of header-dropdown-menu.liquid

{%- if section.settings.menu_hover -%}
  <script src="{{ 'header-dropdown-hover.js' | asset_url }}" defer="defer"></script>
{%- endif -%}