How can I enable scroll in the navbar on my Webflow site so that all navigation links are visible on mobile?

TL;DR
  • Select the nav menu container in the Designer's Navigator panel on mobile breakpoints.
  • Set Max Height (e.g., 70vh) and Overflow to Scroll in the Style panel.
  • Remove any fixed Height to allow natural content growth.
  • Test in preview mode to ensure scroll functionality works.
  • Optionally add padding or custom scrollbar styling for better appearance.

If your navbar menu is overflowing on mobile, enabling scroll will let users access all navigation links. Here's how to set it up in Webflow.

​

1. Select the Dropdown or Menu Wrapper

​

  • Go to Designer.
  • Open the Navigator panel.
  • Locate and select the nav menu container element (usually named Navbar, Nav Menu, or similar).
  • Make sure you target the element that houses the actual list of links.

​

2. Adjust Overflow and Max Height Settings

​

  • Switch to the mobile breakpoint (e.g., tablet, mobile landscape, mobile portrait).
  • With the nav menu container selected, go to the Style panel.
  • Set the following:
  • Max Height: e.g., 70vh (or any value less than the full screen height).
  • Overflow: set to Scroll.

​

This will enable vertical scroll if the links exceed the set Max Height.

​

3. Remove Fixed Height (if applicable)

​

  • If a fixed Height value is applied (e.g., 500px), remove it.
  • Let the menu container grow naturally with content, constrained only by the Max Height.

​

4. Test the Interaction

​

  • Click the Navbar menu button to open the menu.
  • Ensure you can scroll through all links.
  • View it in preview mode and try in different mobile breakpoints.

​

5. Optional: Add Padding or Scrollbar Styling

​

  • Add padding to the top/bottom of the menu if content feels cramped.
  • If desired, use custom scrollbar styling in the page settings or inside an Embed component with custom CSS (note: this requires a paid plan or site export).

​

Summary

​

To enable scrolling in your mobile navbar menu, set a Max Height and apply Overflow: Scroll to the nav menu container on mobile breakpoints. This ensures that long menus remain accessible without breaking your layout.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Can I change the tablet breakpoint in Webflow from 990px to 1300px width for a vertical menu on my website?
What are some alternative options for reinitializing Webflow interactions in ix2, similar to the functions Webflow.ready() and Webflow.destroy() in ix1?
How can I create a hyperlink in Webflow that automatically downloads a Microsoft Word document when clicked on the published site?
How can I hide an entire section in Webflow when a dynamic list is empty? I found a previous post that was somewhat helpful, but I need further clarification.
How can I access and modify the laptop image or text in a Webflow template?
Can I style the slider dots/bullets on a Webflow page in a way other than the default white or black options?
How can I make the first option in a drop-down field not selectable in Webflow?
Why are two images in my Webflow portfolio-grid page displaying with different heights in Safari compared to Chrome and Firefox? The images were uploaded to the CMS as 800x600 pixels and I created responsive images using the CMD + SHIFT + I command. Other images have their responsive images included in the markup, but these two do not. Disabling custom scripts did not solve the problem.
What are some additional tools or apps that work well with Webflow, such as analytics, social sharing, commenting, email (specifically Mailchimp), and CDN/security?
What code can I use to deactivate the zoom in on my phone when I focus on the form (text input) elements in Webflow?
Should I use WordPress or Webflow for my future projects, considering that I am currently using WordPress but am interested in using Webflow's CMS templates? What are the advantages and disadvantages of using Webflow over WordPress?
How can I add ad-hoc HTML tables in my CMS Richtext content in Webflow without the need for clients to edit HTML markup directly?
What are some third-party tools and integrations available for Webflow?
How can I mimic iMessage bubbles in Webflow without encountering issues with word-wrapping, word-breaking, or overflow, causing unwanted space in the div?
What can I do to resolve the ERR_TOO_MANY_REDIRECTS message in Webflow when using Google Domains as my website's default domain?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?