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 navbar or nav menu element in the mobile breakpoint.
Set a fixed or max height (e.g., 50vh or max-height: 80vh).
Apply overflow: auto or scroll to enable vertical scrolling.
Test in preview and on an actual mobile device to ensure proper behavior.

If your Webflow navbar overflows with too many links on mobile, enabling scroll ensures users can access all items. Here’s how to enable vertical scrolling for the navbar on small screens.

Go to the Designer.
Click on the Navbar component or the container that holds your navigation links.
Make sure you’re working within the mobile breakpoint where the issue occurs (e.g., Mobile Portrait).

2. Apply a Fixed Height or Max Height

Select the container or menu that wraps the navigation links (commonly called Nav Menu).
In the Style panel, scroll to the Size section.
Set a fixed height (e.g., 50vh or 300px) or a max height (e.g., max-height: 80vh) so the element doesn’t keep growing with added links.

3. Enable Overflow Scrolling

With the same element selected, go to the Overflow section in the Style panel.
Set Overflow: Auto or Overflow: Scroll.
Use Auto to show scrollbars only when necessary.

4. Test on Preview and Publish

Click the eye icon (“Preview” mode) to test behavior on the mobile viewport.
Use your mouse or a touch emulator to scroll the nav menu.
Publish your site and test it on a real mobile device to ensure usability.

Summary

To make your navbar scrollable on mobile, set a max height and apply overflow: auto or scroll to the nav menu container. This allows users to access all navigation links, even if they exceed the height of the mobile screen.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer

Other Webflow Questions

How can I prevent elements in the header of my Webflow website from being positioned incorrectly and cut off on Safari browsers? I have already tried positioning the elements with absolute positioning and setting the left and right tags to auto, but the margin I added to the left seems to be larger on Safari compared to Chrome.

Can I integrate a Shopify shopping cart with my Webflow-hosted website?

Has anyone experienced the issue of a relentless loop when trying to log in to their Webflow account linked to Google, even after attempting solutions like incognito mode and clearing cache? Support has been unresponsive for 4 days, and there is an urgent need to submit a portfolio for a bootcamp. Any advice or similar experiences?

Can an unspecified number of images be loaded through the CMS in Webflow to display on a webpage, such as in an image slider, without using workarounds like adding multiple images to a rich text field or setting conditional visibility?

Why am I getting "Image elements do not have explicit 'width' and 'height'" errors in Webflow even though I have specified the attributes?

What are the best practices for modifying the dimensions of a Webflow form to make it larger while maintaining responsiveness?

How can security headers be added in Webflow to enhance website security?

How can I integrate Woocommerce with my Webflow website that has been converted to Wordpress with Udesly, so that I can fully utilize the capabilities of Woocommerce for my shop?

Which shopping cart integrates well with Webflow for a custom lighting company that wants to allow visitors to purchase lighting fixtures "as shown" on the website? Thank you!

Is there a way to auto-scroll the page in Webflow after a certain amount of time, without the script automatically scrolling back up if the user has already scrolled past the designated point?

How can I fix the issue where my "scroll into view" animation doesn't run immediately if the content is already in the viewport when the page loads in Webflow? Should I use a different type of interaction with IX2, or is there another solution?

Is there an issue with Webflow causing intermittent 504 Gateway Timeouts on custom domains after today's maintenance, as indicated by increased latency starting at 4:30pm UK time?

How can I create buttons in Webflow that link to specific slides in a slider? I've tried using unique IDs for the slides and images but they're not working. Thank you, David.

What are the steps to share a web page created in Webflow using a public share link?

Is there a way to set the modestbranding and color of a YouTube video element in Webflow, either through the UI or via custom code?

Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?

How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?

How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?

How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?

How can I dynamically redirect to a CMS created after form submission in Webflow?

How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?

How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?

How can I disable right-clicking on images to prevent downloading on my Webflow portfolio website?

In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!

How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?

Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!

Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?

How can I pull the stored email from the first form submitted on our website and input it into a field on a later form during the sign-up process in Webflow? I have tried using the provided script but it only displays "undefined" in the field. I don't have much knowledge of JavaScript and found this script online.

How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?

When will Webflow update the "Select Field" component to allow for a placeholder with different colors before and after selection, without the need for a label above the field?