Two click on menu items needed in off canvas elements on iOs systems

[Regnalf]

I’ve been searching the forum for a solution to what seems to still be a problem with navigation in the iOs operating system on off canvs elements.

Both Mega Menu off canvas and the normal off canvas seem to have this issue if the content overflows the screen height. Also the solution according to the following post using component (formerly global block) did not work:

Link in menu needs to be clicked two time to open on iOS

Hey Ivan, Sorry for the lack of details but the issue is the same even if you’re using the Navigation Layered element. The bug is triggered if the content within the Off Canvas is long producing a scrollbar. If you wish to continue using the Navigation Layered, regretfully, you need to try reducing your menu items so that no scrolling will be enabled sinde the Off Canvas. Otherwise, follow the setup in the other thread where the Navigation element is added to a Global Block then the global bl…

And it doesn’t seem to matter if “body scroll” is enabled or not.
Mega Menu Dropdown doesn’t seem to have this problem, which I currently use as an alternative to Off Canvas.

So my question is, is this issue still current? And I couldn’t find this “dynamic rendering” option in the off canvs element anymore either, has it been removed?

[ruenel]

Hi @Regnalf,

You may have created a similar thread here:

• Mini cart/cart off canvas element button background still missing - Support - Themeco Forum

Cheers.

[Regnalf]

Not quite the same topic, because there it is about style problems. My problem is with the navigation problem of the links due to unnecessary multiple clicks.

But I found something similar in the beta forum which could be relevant for this. There it is about accordions, but maybe it helps with my problem.

https://theme.co/forum/t/pro-6-0-7-minor-issues/103126/5

Let’s wait for the Version 6.1.6

[christian]

Hey @Regnalf,

Yes, please kindly wait for Pro 6.1.6 release as our development team made progress toggle issues.

Thanks.

[Regnalf]

Sorry, Version 6.1.6 didn’t solve the navigation click issue!

[charlie]

Can you secure note me a site with your issue? Thanks it could be related to that one and we’ll get to the bottom of it.

[Regnalf]

Thanks for further investigation. (Secure note filled, it’s still a site under construction)

The red menu is the mm off canvas, and the green is the mm dropdown.

In case of a very large iPhone, i’ve set the gap very large to produce an overflow of the off canvas menu.
But don’t scroll, this issue happens only for the first click without do anything else!

[charlie]

The issue is the search modal is conflicting or hijacking it on first interaction. If I delete that modal in BrowserStack it’ll work on the first tap, and I bet if you delete that from your menu it’ll work fine. Why that only happens with off-canvas alludes me, but it limits my search so thank you for that.

[Regnalf]

I had previously used the inline search box where you can directly enter the search term. But this is directly focused when opening the menu and the iPhone opens immediately the Keyboard control. Which is also quite annoying.

But even if I omit the search box, does not work for me navigation with one click!

So as I have already written, it all works for me at the moment only with the Mega Menu dropdown element.

And please don’t try this on browser stack, browser dev tools or whatever! This is a real device issue!!!
So try this on an real iPhone!

[charlie]

Something with a scrollbar library we use (Perfect Scrollbar) is hijacking the first couple of a events for mobile it seems on your page. I think I might just send you a script for the meantime as I think it’s going to take some time to fix content scrolling, by either get it working with mobile better or by using a different library if it comes down to it.

[Regnalf]

Thanks, i will stick with the mega menu dropdown, because i already set it up and it works. Hope you will fix this issue for off canvas in the future.

[ruenel]

No problem.