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
- Ensure the drop-down list has overflow-y: auto and a suitable max-height (like 60vh) to enable scrolling.
- Verify no parent containers use overflow: hidden and ensure positioning styles don't block overflow.
- Test on a published site, not just in Webflow's preview, for accurate mobile behavior.
Your mobile drop-down menu not scrolling fully is likely caused by incorrect parent container styles or a conflict between positioning and overflow behavior on mobile. Here's how you can fix it and get it to behave like the official Webflow site.
1. Check the Drop-down Menu Wrapper Parent
- Locate the Drop-down List element in your Navigator.
- Make sure its parent container has a defined height or doesn't restrict overflow.
- If the parent has
overflow: hidden, it will prevent scrolling inside the drop-down.
2. Set Overflow for the Menu Balloon
- Select the Drop-down List (the actual menu that expands).
- Set
overflow: autooroverflow-y: autoso it can scroll when content overflows. - If the height of the menu is limited, this will allow vertical scrolling.
3. Set a Max Height on the Drop-down
- To ensure the menu doesn't overextend off the screen, set a
max-height(e.g.,60vh). - This prevents the menu from growing too large and helps trigger scrolling.
4. Double-Check Positioning
- If your drop-down is position: absolute or fixed, verify that its nearest positioned ancestor allows for proper layout and overflow.
- Alternatively, use position: relative cautiously on ancestors to avoid cutting off scroll areas.
5. Wrap Menu in a Scrollable Div (if needed)
- If the drop-down contains lots of items, wrap them in a div block set to
overflow-y: autoand amax-heightto enforce scrolling. - This is especially helpful in complex mobile menus or when using custom nav menus.
6. Test on Publish, Not Just Preview
- Webflow’s preview mode doesn’t fully replicate mobile scrolling behaviors.
- Always publish your site and test it on a mobile device or simulator for accurate results.
Summary
To fix mobile drop-down scrolling issues, ensure the drop-down list has overflow-y: auto, a proper max-height, and no parent containers restricting overflow. Check positioning styles and always test changes on a live published site, not just in preview.
