Streaming live at 10am (PST)

Menu scrolling problem on mobile devices

Hi,

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?

thanks.

https://preview.webflow.com/preview/hortaxdraft?preview=75b550b2f9581242b65f6fe35448e4cd

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?

thanks

Public share: https://preview.webflow.com/preview/hortaxdraft?preview=75b550b2f9581242b65f6fe35448e4cd1

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.

mobile_scroll

Add a navbar component and make it fixed.

14

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.
Carol

https://preview.webflow.com/preview/hortaxdraft?preview=75b550b2f9581242b65f6fe35448e4cd

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