Mobile Menu Problem - Mobile bar scrolls

[AshleyF]

Hello,

This is a follow on from ticket https://theme.co/apex/forum/t/mobile-off-canvas/37625 (this closed before I had chance to come back to you and reply).

In that last reply you suggested the problem is my user account enables toolbar, but that cant be the problem at all because when testing on my phone (Galaxy S8) I am not logged into the site.

…

In summary the problem, the problem is when using a mobile phone), you can’t scroll the off canvas page, because the main page (underneath) is scrolled. To me this suggests some kind of z-index issue for the off canvas?

Just to explain, I have tried removing all my CSS, all plugins and tried different menu types, the problem remains regardless.

[AshleyF]

Just to say, on Pro Header editor, it works just fine. It’s only within various mobile browsers Chrome, IE, Opera where the problem occurs.

[rad]

Hi @ocduk,

Have you tried removing the toolbar as @christopher.amirian recommended? Space is due to the toolbar, which could be due to floating navbar, and of course, the mobile address bar has a role in it too (address bar disappears as you scroll down).

Plus, scrolling in mobile is the same as dragging, re-rendering is only triggered when you release your finger from the screen. It’s the same on the desktop when you click a button and hold it, it will not link until you release your mouse. Hence, the space due to address bars and toolbars will stay there until you stop scrolling (browser re-render functionality). But, I’ll continue checking, that’s how I see it on every design even on full-screen modal and lightboxes from different plugins and themes. It’s a mobile browser’s limitation.

Thanks!

[AshleyF]

Hi Rad,

Thanks for taking a look, and yeah I did change my user setting, but made no difference.

I have checked on Android and iPhone and the problem is there. But it doesn’t seem to occur with any other website that uses similar style.

Whilst yes I can click the menu item without problem, you should still be able to scroll up/down a submenu list without the background of the screen scrolling. I added a nav modal and it’s more obvious there.

[christopher]

Hi @ocduk,

I did check your website again and it is working with no problem on my iPhone SE now. I tapped on the mobile menu and the menu appears. I tapped on the arrow icons and they showed different sub menus. I can easily scroll. SO I have access to all sub menus with no problem.

So the problem you shared with us as a screencast is not happening for me anymore. Try to clear your mobile browser cache or check the website with another phone.

Thank you.