How can I make a scrollable menu for a fixed navigation in Webflow?
TL;DR
- Set the navigation bar to Fixed position with a high Z-index.
- Limit the menu container’s max-height and apply Overflow: Auto to enable vertical scrolling when content exceeds the set height.
To create a scrollable menu within a fixed navigation bar in Webflow, you need to limit the menu's height and enable vertical scrolling inside it.
1. Set Your Navigation as Fixed
- Select your Nav Bar element on the canvas.
- In the Style Panel, set the Position to Fixed (usually at the top).
- Set a high Z-index (e.g., 1000) to keep it above other content.
2. Limit the Menu Container Height
- Select the Menu Wrapper or
Nav Menudiv (the dropdown portion of the navbar). - Set a specific max-height (e.g., 300px or
50vh) to cap its vertical size. - This will ensure that if the menu content exceeds this height, scrolling will activate.
3. Enable Scroll on Overflow
- With the
Nav Menustill selected, go to the Overflow setting in the Style Panel. - Set Overflow: Auto or Overflow-Y: Auto.
- This allows the menu to scroll only when content overflows vertically.
4. Style the Scrollbar (Optional)
- While Webflow doesn’t have built-in scrollbar styling, you can use a custom code embed in the project settings or inside the page to customize the scrollbar visually (note: not editable within Webflow’s Designer).
5. Test Responsiveness
- Switch to tablet and mobile views in the Webflow Designer.
- Ensure the scroll works properly when the mobile menu expands.
Summary
To make a scrollable menu inside a fixed navigation in Webflow, set the nav bar to Fixed, limit the menu's max-height, and apply Overflow: Auto to the menu container. This ensures the menu stays within screen bounds and scrolls when needed.
