Menu not scrolling on mobile devices

[Aranov]

Hi,

I have a fairly extensive menu on our site that isn’t working well on mobile devices. When I try to scroll to the bottom options on the menu, only the page behind the menu scrolls. Can you please help us with this? We would like the menu to remain sticky, but scroll-able.

I will send you the website url privately.

[christopher]

Hi Danny,

The problem that you are experiencing is because you set the header to sticky mode on mobile. You can see the subtle difference.

If you are at the very top of the page that the sticky mode is not kicked in yet you will see that it is possible to scroll the menu items inside the menu Off-Canvas.

But if you scroll down and then open up the menu, now the header is in sticky mode and it is not possible to scroll the menus within.

Unfortunately, there is no way that you can enable the scrolling for the menu when it is in sticky mode.

I suggest that you consider changing your design, either do not use the sticky mode for the mobile or try to use an element such as Navigation Layered and add some of your menu items inside the other one as a child.

I am also curious if the Navigation modal element will work in Sticky mode as I did not test that. That is another idea that you can test.

Thank you for your understanding.

[Aranov]

Can you please tell me how to to change the header to fixed top position?

[Aranov]

I only want to unstick the menu for mobile devices…

[rad]

Hi Danny,

For that setup, you’ll have to add multiple header bar, one for desktop and the sticky one, and one for mobile for non-sticky header. And similar how you already control your desktop and mobile menu’s visibility for each device, you can do the same with header bars.

Thanks!