Having to double tap on Off Canvas menu


I have created an off canvas menu for mobile visualisation of my website, however this doesn’t appear to function properly as once the off canvas is open via the hamburger menu on iPhone devices, the user has to tap on the menu or scroll in order to then be able to actually use it (i.e. click on an item / link and therefore navigate the website). This can be quite frustrating or anyway not optimal for the user. The issue does not present itself on desktop, even if I set the mobile size via a desktop browser. Also, the problem appears to only occur on iPhones (any browser on an iPhone device) whilst it seems to work correctly on Android devices.

I am using the latest version of Pro (4.3.3) and Wordpress (5.7.2 - latest as in before beta). My website is tizianabellini.com

I have found a similar thread (linked here: Off canvas menus on mobile devices not functioning properly) but it was closed with no definitive solution to the problem.

I have cleared the cache, tried incognito / private mode, tried on several different iPhone devices and I always get the same issue. Sub Menu trigger is set to Sub Indicator. I have looked through the off canvas settings but can’t find a solution to the issue.

If you could give me any advice / help to solve this issue that’d be great!
Let me know should you need any further clarification.

Many thanks in advance!

Hi @Tiziana_Bellini,

Since posting the issue, I have found out that it is being caused by any overflowing content in the off-canvas panel that is showing off the iPhone screen. The solution before the new off-canvas elements were released was using the (now deprecated) Content Area Off-Canvas element with the “Dynamic Rendering” option enabled. This loads/resets the panel every time and so there is no double tapping issue. However, it looks like the “Dynamic Rendering” option isn’t available on the new off-canvas element yet - I think there are plans to add it back in.

If you want to use the old off-canvas element, you can turn it on just go to Pro > Settings, click Elements, find Content Area Off-Canvas, turn it on so it goes green, click Configure and enable “Show In Library”, click Update.

If you want to use the new off-canvas elements, I would recommend reducing the amount of content in the off-canvas menu so it doesn’t go off the edge of the iPhone screen.

Hope this helps.

Hi @Tiziana_Bellini,

It has been correctly explained by Chris. Dynamic Rendering option is still available with Content Area Modal. Please find a few more details on the following thread.

Please note that the point has been already added to our feature request list so it might be taken into account in the future.

Thanks! I reduced the size of the content of the off canvas and it’s working now.
Thanks again :smiley:

Hi @Tiziana_Bellini,

Glad that we are able to help you.


No problem. Glad you got it sorted.