How do I fix the issue where my mobile drop-down menu does not scroll fully even though I have set the height and overflow properties correctly? I want it to work like the Webflow website. Thank you.
TL;DR
- Set a max-height (e.g., calc(100vh - navbar height)) and overflow-y: auto on the dropdown container.
- Ensure no parent elements restrict scrolling with overflow: hidden or limited height.
- Avoid using exact 100vh on mobile; adjust for dynamic browser UI.
- Use live previews and test on real devices to verify scrolling works as intended.
When your mobile drop-down menu doesn't scroll fully despite correct height and overflow settings, it's typically due to parent elements restricting scrolling behavior or viewport height miscalculations on mobile.
1. Confirm Dropdown Container Has Scroll Enabled
- Select the dropdown wrapper or menu container.
- Make sure its height is limited properly, such as using
100vhor a fixed height. - Set Overflow to Auto or Overflow-Y: Scroll on the dropdown menu if the content exceeds the visible height.
2. Check All Parent Elements for Overflow and Height Constraints
- Ensure no parent elements have
overflow: hiddenor a height that restricts the dropdown. - The Navbar and Body should allow visible overflow or support scroll.
- If the dropdown is inside a fixed or absolute positioned parent, verify that parent’s height allows full visibility or interaction.
3. Avoid Full 100vh on Mobile Without Adjustments
- On mobile browsers,
100vhmay exceed the actual visible area due to the dynamic address bar. - Instead of using
100vh, consider setting max-height to calc(100vh - Xpx) whereXis the estimated height of your navbar or header. - Example: Set dropdown menu’s max-height to
calc(100vh - 60px)if the navbar is 60px tall.
4. Enable Scrolling Behavior Like Webflow's Menu
- Webflow’s own site achieves scrollable dropdown menus on mobile by:
- Using a fixed navbar with a
z-indexabove other elements. - The dropdown container has max-height with overflow set to auto.
- The site’s body element remains scrollable, or scrolling is restricted intentionally when the menu opens.
5. Test in Live Preview and On Actual Devices
- Use Webflow Preview and Published Site to test since Designer preview may not replicate full scroll behavior.
- Test on real mobile devices to check if the scroll becomes available during actual usage.
Summary
To fix the unscrollable drop-down menu on mobile, ensure the dropdown container has max-height and overflow set correctly, and check parent elements for restrictive overflow or height settings. For best results, avoid strict 100vh values on mobile and test on devices to mimic Webflow’s responsive scrolling behavior.