Streaming live at 10am (PST)

Scrollable nav and dropdown menu in mobile


#1

Hi, my drop down menu on my mobile phone does not scroll down fully.

I have set the Height of the NavMenu to 100VH and the Overflow to Auto.

I have also set the Height of the Dropdown to 100VH and Overflow to Auto

Problem i have is that there are items in the Dropdown i cant see (after Transaction History). Even when i scroll in mobile, I only see the scroll bar moving but the items don’t show.

How do i fix this. I have seen the Webflow website in mobile and it works perfectly. How do i get it to be like that.

https://preview.webflow.com/preview/airbanpro?preview=0d12387f14df8f7773d2ceed3010ca92

Thanks.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Here you go. Most things have been seen in the past on these forums so don’t be afraid to search and scroll to older posts :slight_smile: [TUTORIAL] Make mobile menu SCROLLABLE


#3

Thanks @DFink, I have been to that post. It did help, but did not solve it 100%. My problem now is the Dropdown in the Nav menu.

I have tried setting the height of the Dropdown too to different values ( 100vh, 50vh ). But notice that there last 1 or 2 items still don’t show. Even though the page in the background scrolls.

Then I set it to 45vh, which works but the items only show if I scroll the dropdown rather than the nav menu.

Doing that does not feel like the natural interaction. Someone else using the app might not find it user friendly.

Note. The dropdown is in a div that contain both the dropdown and the image.


#4

You need to set it to overflow auto so it turns on scrolling.


#5

@DFink, if you are referring to the div that contains both the image and dropdown, then yes I tried it by setting the overflow to auto, but that did not work.

To recap

  1. I have set the overflow of the Nav Menu to auto and height to 100vh

  2. I have set the overflow of the dropdown to auto and height to 45vh (currently thats the height that makes the dropdown scrollable in the nav menu)

  3. I tried what you suggested by setting the overflow of the containing div to auto and also giving it a height. No luck.


#6

You wrapped your dropdown in a div which will cause weird things to happen like the current double scrollbars because it recognizes that div as a separate element to scroll. You should get rid of that extra div and have the dropdown in the main navbar which should trigger the scrollbars when opened or whenever the window is small enough.