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

[jordanbford1]

Hi! My mega-menu will not stay open when I go to click on a lower level menu item once I remove my cursor from the menu item itself. This is my website. Can you please tell me how I can fix this? I am using Trade theme.

Any way to also fit it to drop down under the menu item  and only open as wide as the actual mega-menu contents? Like how this one does on another site

 Thank you!

[laddisahsi]

Hi @jordanbford1 

This could be done using the custom liquid code and css.
You can Hire a shopify developer for this.

If need any help from my end Please let me know, Contact info is in signature.

With Regards,
Laddi

[mageplaza-cs]

@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:

• In the Assets folder, find the file that controls mega-menu behavior. It's look like:
  
• Click on the file to open it in the editor.
• Paste  updated code: 

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.

[jordanbford1]

@mageplaza-cs  I am having trouble locating which file controls this mega-menu. Any idea the name of it?

[mageplaza-cs]

hi @jordanbford1,

You can locate the file that controls the mega menu in the Assets folder, which contains all the JavaScript files for your website. The structure and file names may vary between themes, so I cannot provide the exact file name.