Archived topic
Off-Canvas Panel closes after Nav item Tap on mobile devices and tablets
13 replies · Started by Stephane Bergeron on April 9, 2021
Hi,
I'm experiencing the same issue as the OP in this older thread:
https://generatepress.com/forums/topic/off-canvas-panel-closes-after-nav-item-click-tap/
I put an Elementor template with two menus in it in the Off-Canvas widget triggered from . Works great on desktop but on any tablet or smartphone, when I tap an item with a submenu, it closes the off-canvas panel after flashing the sub-menu for half a second or so and does not go to any other page. I tried it even with a regular menu widget. Same thing. again, works great on desktop where I have an actual “hover” interaction.
I also tried with another Elementor menu widget that, like the OP here, opens the sub menu on first tap then you need to tap again to actually go to the new page. Also worked fine on desktop and not on tablet/mobile.
Tested in both Chrome device emulation AND an iPhone, my Note 20 and an Android tablet and it fails the same way on all but desktop.
The site in development can be seen here:
Hi there,
i am not overly familiar with the Elementor Navigation.
In GP we would choose the Click - Arrow option in the Navigation settings. As this allows the parent item to have a link as well as the toggle for opening the sub menu.
Does Elementor provide that option ?
Hi David,
The problem is not with the Elementor navigation. I did try another nav widget that opens the menu on first tap and follows a link on second tap. Same issue. The menu doesn't have time to open that the off canvas container closes.
FWIW, I did a quick test late last night with another theme with similar off-canvas functionality on a copy of the same site on my local server and using the same Elementor menu template loaded as a widget as I do in GPP and that worked fine. The menus worked normally and the off canvas container didn't close when I tapped a menu item of sub menu arrow.
So that tells me it's something with GPP that somehow causes this. Any ideas?
Hi there,
You could give this a shot: https://generatepress.com/forums/topic/off-canvas-panel-closes-after-click-in-a-menu-item/#post-1584705
Let us know :)
Hi Tom,
Thanks for your reply. The code in that other thread doesn't work. No change in behavior.
I get this error in console:
Uncaught TypeError: Failed to execute 'removeEventListener' on 'EventTarget': parameter 2 is not of type 'Object'.
Complete error msg:
Uncaught TypeError: Failed to execute 'removeEventListener' on 'EventTarget': parameter 2 is not of type 'Object'.
at HTMLDocument.<anonymous> (custom.js?ver=1.0.0:8)
at e (jquery.min.js?ver=3.5.1:2)
at t (jquery.min.js?ver=3.5.1:2)
(anonymous) @ custom.js?ver=1.0.0:8
e @ jquery.min.js?ver=3.5.1:2
t @ jquery.min.js?ver=3.5.1:2
setTimeout (async)
S.readyException @ jquery.min.js?ver=3.5.1:2
(anonymous) @ jquery.min.js?ver=3.5.1:2
e @ jquery.min.js?ver=3.5.1:2
t @ jquery.min.js?ver=3.5.1:2
setTimeout (async)
(anonymous) @ jquery.min.js?ver=3.5.1:2
c @ jquery.min.js?ver=3.5.1:2
fireWith @ jquery.min.js?ver=3.5.1:2
fire @ jquery.min.js?ver=3.5.1:2
c @ jquery.min.js?ver=3.5.1:2
fireWith @ jquery.min.js?ver=3.5.1:2
t @ jquery.min.js?ver=3.5.1:2
setTimeout (async)
(anonymous) @ jquery.min.js?ver=3.5.1:2
c @ jquery.min.js?ver=3.5.1:2
add @ jquery.min.js?ver=3.5.1:2
(anonymous) @ jquery.min.js?ver=3.5.1:2
s.Deferred.s.Deferred @ jquery-migrate.min.js?ver=3.3.2:2
then @ jquery.min.js?ver=3.5.1:2
S.fn.ready @ jquery.min.js?ver=3.5.1:2
(anonymous) @ custom.js?ver=1.0.0:3
e @ jquery.min.js?ver=3.5.1:2
t @ jquery.min.js?ver=3.5.1:2
setTimeout (async)
(anonymous) @ jquery.min.js?ver=3.5.1:2
c @ jquery.min.js?ver=3.5.1:2
fireWith @ jquery.min.js?ver=3.5.1:2
fire @ jquery.min.js?ver=3.5.1:2
c @ jquery.min.js?ver=3.5.1:2
fireWith @ jquery.min.js?ver=3.5.1:2
ready @ jquery.min.js?ver=3.5.1:2
B @ jquery.min.js?ver=3.5.1:2
Ok, nevermind. I've moved on with another solution as I wasted over a day on this which was time I really didn't have. I recreated the entire header in Elementor calling my full screen menu from an Elementor button. The HTML is not as clean as GP's native markup for header and menu but at least it works and I can concentrate on other things.
Thanks.
But if you have a solution for this error for another time it would be appreciated. Thanks.
Strange, I would need to inspect the HTML to see why it won't work. How were you adding the JS?
I tried adding the code between script tags right before the closing head tag using a GPP Elements hook. Then I tried enqueuing a custom JS file with the PHP function both in the header then the footer and both within a jQuery document ready function and by adding the code directly in the file without the document ready function (that code was the only thing in the custom JS file as I didn't need other custom JS code in this project).
I just tried again with the Elements hook on a copy of the site I did before redoing the header in Elementor on the main dev site. I don't get the JS error now but the problem is still there and a tap on a menu item with a submenu still results in my seeing the submenu for a fraction of a second and the slideout closing before I can click anything else.
You can see that here:
https://wordpressmu-532159-1866969.cloudwaysapps.com/
The main dev site that now works correctly with the full Elementor header is here if that helps :
https://wordpressmu-532159-1696521.cloudwaysapps.com/
Thanks!
Hi Tom,
Any other idea why this didn't work for me?
Thanks!
Can you try adding it to the wp_footer hook with a priority like 200?
Hi Tom,
Did that and still no go... and the JS error is back.
Thanks!
Seems like it's been removed. Any way I can see it on the site?
