Webflow sync, pageviews & more.
NEW

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 on a mobile breakpoint, set its max height to 100vh, and enable vertical overflow scrolling with Overflow: Auto.
  • Adjust padding or margins if needed and test across mobile breakpoints to ensure all links are accessible.

If your mobile navbar is too tall to fit on the screen and some navigation links are being hidden, you need to enable scroll behavior specifically for the mobile menu container.

1. Select the Mobile Menu Container

  • Open Webflow Designer and go to a smaller breakpoint (e.g., tablet or mobile view).
  • Click to open the Navbar component so the mobile menu appears.
  • Select the element that contains the navigation links — usually named something like Nav Menu.

2. Set a Maximum Height

  • With the Nav Menu selected, go to the Style panel.
  • Under Size, set a max height (e.g., 100vh) to restrict it to the height of the viewport.

3. Enable Vertical Scrolling

  • Still in the Style panel under Overflow, set:
  • Overflow: Auto for vertical scrolling.
  • This allows the user to scroll inside the nav if the content exceeds the height.

4. Adjust Padding or Margins if Needed

  • If padding or margins are pushing the links beyond the viewport, reduce them to make better use of the available space.
  • This often happens on smaller screens where excessive spacing compounds the issue.

5. Test on All Mobile Breakpoints

  • Preview your site and open the navbar on mobile portrait and tablet modes.
  • Scroll within the menu to make sure all links are accessible.

Summary

To make all navigation links visible in a mobile navbar, set a max height (e.g., 100vh) and enable vertical overflow scrolling (Overflow: Auto) on the Nav Menu element. This ensures users can scroll the menu if the content exceeds the screen height.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
What could be causing a pop-up form to be cropped at the top on iPhones and Safari, despite working properly on Chrome Desktop and Mobile?
How can I create a master item, like a Header, Nav, and Footer, in Webflow to make it easier to use on every page? Currently, I have to build them individually for each page, which can lead to alignment issues. I'm new to Webflow, so any guidance would be greatly appreciated. Thank you!
Can I adjust the indent of a bullet list in a rich text element in Webflow?
What could be the reason for the field not populating in Webflow?
How can I automatically invert the color of my logo on different colored backgrounds in Webflow?
What are the drawbacks of hosting a website with a domain initially and then switching to a custom domain later in terms of Google rankings and ease of ranking with the new domain? Why is there a price difference ($0.99 on GoDaddy vs $17.00 on Google Domains) for the custom domain I want to get? What are the pros and cons of choosing either route? What does it mean when GoDaddy says "Restrictions apply" and Google doesn't?
Why does the div element in Webflow not hide on the second click?
Where can I find the CSS class "wf-section" in Webflow, as it is used in a downloaded template but not listed in any of the stylesheets?
How can I connect a subdomain (ad.kimberleyplastic.com.au) to a Webflow hosted site while keeping the main domain (kimberleyplastic.com.au) pointed elsewhere? I have already set up the subdomain with the Webflow A-Records.
Has anyone successfully implemented sticky code on a sidebar using Webflow? I've been struggling to make it work and could use some guidance.
Can the section in my Webflow Home page, where a CMS collection of events is displayed, be automatically hidden when there are no events?
How can I enable user account creation and interaction on my Webflow website without using Firebase integration?
Is adding meta data to the 404 page in Webflow a safer and better method for no indexing compared to disallowing the 404 page?
How can I integrate my Webflow form with Hubspot without using Zapier?
How can I dynamically change the background of every other item in a collection list in Webflow?
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 dynamically redirect to a CMS created after form submission in Webflow?
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!
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?