Mega-menu will not stay open without cursor in Trade Theme

Store Design
, ,
3

@jordanbford1 ,
I am from Mageplaza - Shopify solution expert.

To solve your issue, you need to modify your JavaScript logic. Here are the steps you can follow to update the Javascript:

1. Access Your Theme Files:

  • Go to your Shopify Admin.
  • Navigate to Online Store > Themes.
  • Click Actions > Edit code.

2. Edit the JavaScript File:

const inlineMenu = document.querySelector(".header__inline-menu");

if (inlineMenu) {
  const detailsItems = inlineMenu.querySelectorAll("details");

  detailsItems.forEach(item => {
    const ulElement = item.querySelector("ul");

    // Ensure ulElement exists
    if (!ulElement) return;

    const currentMenuIndex = item.getAttribute('id')?.split('-')[2];
    if (!currentMenuIndex) return;

    const menuContentId = `MegaMenu-Content-${currentMenuIndex}`;
    const menuContent = document.getElementById(menuContentId);

    // Ensure the menu content exists
    if (!menuContent) return;

    item.addEventListener("mouseover", () => {
      item.setAttribute("open", true);

      // Remove redundant listeners
      const closeMenu = () => {
        item.removeAttribute("open");
      };

      ulElement.addEventListener("mouseleave", closeMenu, { once: true });
      menuContent.addEventListener("mouseleave", closeMenu, { once: true });
    });
  });
}​
  • Save the changes.

Please let me know if it is functioning as expected.

Best regards.