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.
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 [TUTORIAL] Make mobile menu SCROLLABLE
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.
@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
I have set the overflow of the Nav Menu to auto and height to 100vh
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)
I tried what you suggested by setting the overflow of the containing div to auto and also giving it a height. No luck.
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.
I am having the same issue and have tried changing overflow options on all other elements around the navbar with no luck. I’ve actutally continuously had this issue with several sites now.
I believe it’s a bug within the css not registering overflows on different z-indexes.
(Update)
It has not to do with nested additional divs.
After spending 4 hours determined to fix this… I found that simply navbar was tagged with “fixed”. I did this in attempt to keep the navbar stuck on the top of the page; Yet this also keeps the mobile Navbar menu as “fixed” in scroll regardless of specificity. Since it is nested inside the fixed Navbar it seems to ignore any scroll attributes nested inside.
Although not always ideal… changing the navbar to a “relative” position (keeps only on top of page, but will allow scrolling), this will cause other minor bugs to fix. As a solution i created an additional navbar as:
Make sure overflow is set to visible on all elements nested inside the navbar (original).
Clone the original Navbar.
Duplicate all the needed styles you’ll need (and alter their name(s) so theirs no future bugs).
Changed the secondary navbar to “fixed” with a smaller menu (that won’t need to scroll).
On a z-index lower than the first section of the page (and initial navbar).
Duplicate any custom interactions with new name, and tagging only the new navbar (if yours was also customized)
So once you scroll below the first section, the limited “fixed” navbar shows, While the top of the body that contains a larger navbar that is completely scrollable.
