Menu scrolling problem on mobile devices


I’m having problems with scrolling down the menu items on some mobile devices, e.g. Sony Xperia X. I can open the menu from the hamburger icon, but can’t see all the menu items and scrolling down doesn’t appear to work.

Can anyone help please?


Here is my public share link: LINK
(how to access public share link)

Hi @starfish. Read this tutorial by @sabanna: [TUTORIAL] Make mobile menu SCROLLABLE

Hi Filiipa,
That was useful and has helped to some degree… However, now, when I open the menu on my phone, initially the menu drops down to 100% height, but as I scroll, the menu shrinks vertically and shows a scroll bar. It does this when the phone is both horizontal and vertical. Have I missed something?


Public share:

I’m having a hard time understanding what’s causing the issue. I think it’s an interaction, but I’m not sure which.
If I were you, I’d start the navigation from scratch.

Add a navbar component and make it fixed.


Then select the Navmenu, give it a height of 100vh, width 100vw, overflow auto.

Add some links and test to make sure the mobile menu scrolls.
Then change the styles and add the interactions you want.

HI Filipa,
Thanks again for being so helpful. I’ve done what you said and have built a separate navbar for tablets and smaller. It appears to work when I check on a testing platform but on my own Xperia X, I can only scroll down as far as the NATAG DECISIONS item in the menu, but can’t reach the bottom of the menu… really odd? It’s so close to being right :slight_smile:

Thank you.

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