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

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

Can I connect a dropdown component in Webflow to a collection template? I want to display a list of categories under a general link in the menu.

Is there an integrated or easy way to set up Google Analytics in Webflow to only track analytics on the production site at a custom domain and fire an event only when a user completes a successful form submission?

How can I style the currently selected link in my Webflow Navbar without a Current state class? I want to differentiate the link for the active page, such as adding a line below the link text.

Is it possible to have a background image in a div, set to "cover" and placed within a div set to "overflow hidden", that reacts to different image proportions and fills either the height or width while cropping to the center, using Webflow?

How can I get the header and footer from other pages to appear on a new page in Webflow, and ensure that the same header and footer appear on any new pages I create?

Can Whatsapp be integrated into a Webflow site?

How can I implement a custom horizontal scrollbar like the one shown in the attached image using Webflow?

How can I export and integrate the blog collections from my Webflow website to create a fully functional static website?

How can I cancel the CMS hosting plan and receive a refund of $10 in Webflow?

How can I remove the "not items found" message in the Multi Images field in Webflow? What should I enter in the Image settings under custom attributes?

Can I use a custom link for form submissions in Webflow? I want to maintain consistency and use our own custom button instead of the default submit button.

Is it possible to restore a single page from a backup in Webflow without losing any recent changes or integrations made?

How can I remove the green color that appears when I select a section in the navigation bar for mobile on Webflow?

How can I make a Div Block take full width within a parent element using Webflow, specifically when the parent element's width is set to a maximum of 1100px and the layout display is set to flexbox?

What could be causing the issue where the Webflow native background video element is not playing after publishing, despite autoplay working during preview?

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

Can the Webflow YouTube component recognize channel IDs instead of video IDs for embedding a Live Stream?

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 fix the issue with the scroll not being smooth on my mobile device (iPhone + Safari) in Webflow?

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 whitelist the IP or user agent of a third-party vendor to crawl my Webflow site for legal compliance archiving purposes?

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 add user input to the end of the redirect URL in Webflow?