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
- Use max-height (e.g., 90vh) with overflow-y: auto on the dropdown container to enable scrolling.
- Avoid overflow: hidden on parent elements and ensure correct z-index and positioning, testing on a real mobile device for best accuracy.
Your mobile dropdown menu not scrolling fully is likely caused by improper handling of overflow or incorrect parent container settings.
1. Check the Dropdown Wrapper's Height and Overflow
- Select the dropdown menu wrapper (usually a
divinside the dropdown). - Make sure it does not have a fixed height. Use
autoor%if it needs to scale. - Set
overflow: autooroverflow-y: autoto allow vertical scrolling when content exceeds the available space.
2. Confirm the Parent Element Allows Scrolling
- If the dropdown is inside a parent container with fixed height or overflow hidden, it may block scrolling.
- Make sure outer containers (like
navbarornav-menu) do not haveoverflow: hiddenthat restricts scrollability.
3. Set a Max-Height Instead of Fixed Height
- Apply a
max-heightinvhunits (e.g., 90vh) instead of a fixed pixel height. This allows the menu to be scrollable if it exceeds the viewport height.
4. Enable Touch Scrolling on Mobile
Ensure that
-webkit-overflow-scrolling: touchis applied (Webflow may not expose this directly, but it helps on iOS).You can add an Embed element with a small custom style to target your dropdown menu wrapper and apply:
selector { -webkit-overflow-scrolling: touch; }
Replace selector with your dropdown class.
5. Check Z-Index and Position
- Verify the dropdown has a higher
z-indexthan surrounding elements. - Set the dropdown position to
absoluteorfixeddepending on context so that it stacks correctly above other content.
6. Test on a Real Device
- Simulators may sometimes behave differently. Test using a real mobile browser to verify the scroll behavior.
Summary
Use max-height: 90vh with overflow-y: auto on your dropdown container. Avoid overflow: hidden on parent elements and ensure your dropdown is properly positioned. This will allow mobile users to scroll the menu fully, as seen on Webflow's site.