Mobile Off Canvas

Support
#1

Re: https://theme.co/apex/forum/t/off-canvas-scrolling/35879

Sorry it’s closed before I got back to you. I will try and explain what I meant a bit clearer. If I click the mobile button, the off canvas area appears. The problem is I can’t scroll up and down the off canvas menu area because the website is scrolling what’s underneath it.

So the site underneath the off canvas pop up has priority over the pop up. Does that make sense?

Is it some kind of z-index issue with the off canvas?

#2

Hi There,

Thanks for asking again!
Can you please refer to this post for a possible answer?

Let us know if that addresses your issue.

Thanks

#3

Thank you, I did look at the other post, and Rad suggested this,

The main issue is the browser address where it pops in and out which changes the height of the viewport, which results for the page layout moving.

This may be the case, but the problem doesn’t seem to do it with your demos or other websites that use similar pop out. So I am not sure what the answer is.

If I open my mobile phone menu view now, I can scroll down ok, but scrolling back up doesn’t work because the background is scrolled (possibly because of the issue Rad mentions).

#4

Hi @ocduk

May I know which mobile device are you using that has this issue? Also, it will be helpful if you can capture a video screencast showing this issue.

Thanks.

#5

Thanks, I am using a Samsung Galaxy S8.

This is a short screencast (ignore the random voice, I had left the YouTube channel playing that helped me create a screencast).

What you will see is me clicking the menu twice, at first you can open the links and scroll down the canvas menu, but if you then look at the top header part, as I scoill back up the canvas menu the background webpage starts to scroll instead.

#6

Hi again,

Thank you for the video screen cast, I checked your setup and I see you’ve a lot of CSS and jQuery customization that could be conflicting with the mobile off canvas, can you please take a complete backup of your CSS and jQuery customization and remove it from your site and see if this resolves the issue?

Let us know how this goes!

#7

Thank you, good thought. I removed all my custom CSS and JS and even added a new hamburger menu at default settings but the problem still occurs. I took another screencast to illustrate.

#8

Hi @ocduk

It sounds like this is the same issue as Rad mentioned here:

May I know which demo exactly that you mean? perhaps sharing the link might be helpful.

Also, I think it’s worth to try different navigation elements on mobile devices to see if one of them achieve what you need:

Thanks.

#9

Hi,

Appreciate your advice, but there’s definitely an issue with my site compared to your Integrity 5 demo (and others) which mobile menus seem to scroll fine.

What I have done to test:

  • Checked my mobile site on Android Chrome, Firefox and IE. Problem occurs on all devices.

  • Taking your advice I have tried other mobile menu types and the problem occurs with all other than menu dropdown, but that layout means menu items disappear off side of screen.

  • I have disabled all plugins at the same time, removed all my CSS, removed all JS and tested at same time… .Problem still occurs.

With your integrity demos, the menu on the mobile seems to stick to the website, so there’s no scroll behind the menu, with mine I cant scroll up because the background starts scrolling.

#10

Hi @ocduk,

The problem seems to be a margin which the WordPress adds whenever the Toolbar is on as you enter the website as an admin. I went to WordPress Dashboard > Users > Your Profile and turned off the Toolbar from there.

Now if you check the website you will not see the problem in question.

Thank you.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.