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

TL;DR

To enable scrolling in the navbar on your Webflow site so that all navigation links are visible on mobile, you can follow these steps:

1. Select the navbar element you want to enable scrolling for.
2. In the Styles panel, click on the gear icon next to the Navbar class to access the Navbar settings.
3. In the Navbar settings, make sure the Navbar is set to "position: fixed" under the Position dropdown.
4. Scroll down to the Settings section and enable the "Overflow" option.
5. Choose the "Overflow: visible" option to allow the navigation links to be visible outside the navbar container.
6. Next, select the menu (when the navbar is in mobile view) and go to its Settings.
7. In the Navbar Mobile menu settings, enable the "Overflow" option as well.
8. Again, choose the "Overflow: visible" option to allow the menu items to be visible outside the mobile menu container.
9. Save and publish your site to see the changes.

By enabling the overflow property and setting it to visible, you allow the content of the navbar and mobile menu to extend outside their containers, making all navigation links visible on mobile screens. Users can scroll horizontally to access additional menu items that couldn't fit within the available space.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer

Other Webflow Questions

How can I fix the issue where my custom cursor gets stuck at the edge of the div on my Webflow CMS project pages when hovering over Vimeo videos?

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 add next and previous buttons to my Webflow blog page template to provide a similar pagination feature as my non-templated blog page? I have read some Forum Entries discussing tutorials by Webflow's guide.

Why are the images and titles not updating on the published Webflow site, even after trying to republish and making sure the site has been published?

How can I fix the issue where the background image is repeated on scroll on mobile devices in Webflow?

How can I remove extra white space on the right side of my Webflow site when scrolling to the left?

What is the best way to create this effect using a normal img element in Webflow instead of setting the image as a background and adding an overlay?

Why is the SVG icon I created in Adobe Illustrator blurry when uploaded by the Webflow developer team?

Can Webflow run a script to detect iOS and only display a 'download now' button on iPads for a site designed for an iPad app?

How can I isolate the specific class in Webflow to resolve links not wrapping in mobile view without breaking other components?

How can I enable event tracking for button clicks in Webflow using Google Analytics?

How can I add a sticky top banner above the Nav Bar Menu in Webflow, while ensuring it doesn't break the navigation bar?

What is the best way to use Google Maps with Webflow while preventing Google Webfonts from being loaded?

What are some third party tools or integrations that can be used with Webflow?

How can I center an image in a column 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 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 prevent scroll when my nav is open in Webflow using code? The scroll is disabled correctly when I change the class name of the second 'menu', but it does not get activated when the menu is closed. It doesn't work at all if both class names are the same. Can anyone provide assistance with this issue?

How can I add date filtering to my current list of filters in Webflow using Finsweet CMS Filtering?

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

How can I configure Webflow forms to exclude empty or unchecked checkboxes when sending emails? Additionally, is it possible to customize the email text for checked checkboxes, such as using "réservé" instead of "true"?

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

How can I make the menu close when a link is clicked 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?

Is there a way to fix the issue of values from Textareas with multiple lines not getting parsed correctly in Webflow Logic when posting to an external API?

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?