Streaming live at 10am (PST)

Menu scrolling problem on mobile devices


#1

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)


#2

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


#3

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


#4

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.

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.


#5

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


#6

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