Helix Ultimate Megamenu Module Menu Collapsing In J5 But Not In J4 - Question | JoomShaper
SP Page Builder 6 is Here! Learn More →

Helix Ultimate Megamenu Module Menu Collapsing In J5 But Not In J4

KE Comm

KE Comm

Helix Framework 3 months ago

I am not certain if this is a Helix, A Pagebuilder or a Joomla 5 issue:

I rebuilt a J4 website in J5. The megamenu consists of Pagebuilder Modules that have Menu Modules in them.

In the example here the Menu Module shows Level 2 and 3 of the Menu. When you click on a menu item, the J4 version the menu does not collapse (intended bevaviour). In the J5 version it does.

Can someone help me and tell me how I prevent the Menu from collapsing when clicked?

Original J4 Website with intended behaviour: GIF: https://ibb.co/9HCD6mjL Website: https://kumavision.com/microsoft-dynamics-365/apps

J5 Website with unwanted Menu collapse GIF: https://ibb.co/qMNHF8vH Website: https://kumavision.dev/microsoft-dynamics-365-business-central/apps-fuer-dynamics-365

0
12 Answers
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 2 months ago #200229

Sure here you go:

We can override this new click-based hide behavior by adding a small JavaScript snippet that prevents the dropdown from being hidden immediately on link click — instead, let the browser handle the navigation normally without forcibly hiding the menu.

Add this Custom JS: Go to: Templates > Your Helix Ultimate Template > Custom Code > Custom JS

Paste the following:

document.addEventListener('DOMContentLoaded', function () {
  const menuLinks = document.querySelectorAll('.sp-megamenu-parent .sp-dropdown li > a');

  menuLinks.forEach(function (link) {
    link.addEventListener('click', function (e) {
      const parentDropdown = link.closest('.sp-dropdown');

      if (parentDropdown) {
        // Delay hiding the dropdown so it's smoother on click
        parentDropdown.classList.add('delay-hide');

        setTimeout(function () {
          parentDropdown.classList.remove('delay-hide');
        }, 300); // Adjust timing if needed
      }
    });
  });
});

Now add this to your Custom CSS section:

.sp-dropdown.delay-hide {
  pointer-events: none;
  opacity: 1 !important;
  transition: opacity 0.2s ease;
}

What This Does:

It prevents immediate collapse of the dropdown menu on click.

The dropdown will stay visually open for ~300ms until the browser navigates away.

The visual “flash” or abrupt disappearance will be smoothed out — making it feel like it was before the update.

Best regards,

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 3 months ago #198672

Hi there!

Sorry for your experience.

I'm not sure about your issue though as the GIFs are not visible from my end. Can I have accessible screenshot to check?

Moreover, would you please give me your admin access to check the issue for you?

Best regards

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 3 months ago #199382

Hi,

Please accept my apology for the delayed response.

It seems same for the both website at my end, when I visit them! Is there any issue happening there along with collapse? I mean any inconvenience performing tasks?

Best regards,

0
KE Comm
KE Comm
Accepted Answer
3 months ago #199395

Okay, then this sounds like this has been changed in the Helix Framework. Both sites are now running version 2.1.3

This website is a copy of an older version running 2.1.1 https://kumatest.com Here the submenu does not collapse.

It is not a functional issue, it is more of a UX issue because the collapse makes no sense, i.e. is incrompehensible to the user.

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 3 months ago #199509

Hi,

Would you please check now the https://kumavision.dev/ site?

0
KE Comm
KE Comm
Accepted Answer
2 months ago #199575

Now it's "twitching". What did you change?

https://ibb.co/nNvPbQyN

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 2 months ago #199693

Hi,

Sorry about that.

I just added css for submenu items to block display. The image is not visible but I think I understand. I will check it further.

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 2 months ago #200205

Please check now if this can be acceptable behavior either....

0
KE Comm
KE Comm
Accepted Answer
2 months ago #200215

Yes, hiding the menu works well. Can you please let me know what exactly was changed, because I have to implement this on a number of Helix websites we are running.

0
KE Comm
KE Comm
Accepted Answer
2 months ago #200233

Thank you!

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 2 months ago #200236

Thanks for accepting the answer and you are always welcome:)

Have a nice day!

0