Mega Menu Toggle - Clicking on Mobile

[j0hnwat3rman]

Hello,

Huge fan of the new Mega Menu element, which I am using on a few websites. I have, however, noticed that the toggle requires two clicks if they’re layered.

For instance, I am using a Mega Menu burger toggle to open a menu on mobile. Then, within the menu that opens, I am using a handful of additional Mega Menu elements to open a secondary layer of content. Unfortunately, the toggle for each of these Mega Menu elements requires two clicks for the next menu to open.

You can see this for yourself by going to https://newsite.nydi.org/team-managers/getting-started/ on a mobile device. From there, click the burger toggle and then click the “About” link.

Anyway to get around or correct this?

[tristup]

Hi @j0hnwat3rman,

Thanks for reaching out.
I have checked your website and follow the steps you described but unfortunately, I was not able to replicate the issue. Can you please provide any video that helps us to recognize the problem?

Thanks

[j0hnwat3rman]

Hey Tristup -

Using browser dev tools on your computer won’t replicate it, but if take a look at your phone you should see it.

You can also download a video recording I took using my own phone here. You’ll notice that for the mega menu toggles layered inside the first mega menu require two clicks to open.

If there’s a better way for me to share the video let me know. I tried to attach it but was told this file type was not allowed.

[ruenel]

Hello @j0hnwat3rman,

I have tested your site on my android phone. I could not replicate the issue. This is what I am seeing on my phone:

Mega Menu Toggle

Please clear your mobile phone browser cache or use private browsing mode and test your site again.

[j0hnwat3rman]

Hey Ruenel -

I should have mentioned it my initial post, but I am on an iPhone running the latest version of iOS.

I had checked on my wife’s iPhone, too, and got the same result. Any thoughts for a potential work around?

Thanks!
John

[christian]

Hey John,

This is a known issue with iOS. Please stay tuned for the succeeding updates as there’s a fix related to this issue where if the content of the off-canvas is longer than the height of the mobile screen, you need to tap twice.

For now, I’d recommend that you keep your mobile menu content short or just enough to fill the height of the mobile screen. Then, to ensure your canvas won’t be scrollable, disable the Body Scroll option.

Hope that helps.