Webflow Mobile Nav Scroll Overflow

Blog | Webflow Mobile Nav Scroll Overflow

The Webflow mobile navigation does not allow overflow scroll out of the box and so you may find that if the content is cut off vertically at the base. To fix this issue we need to add a few simple modifications to the main Webflow 'Nav Menu' (typically .nav-menu) class on the mobile menu breakpoint:-

Ad You might find this useful

Record your screen to communicate better

Loom is the fastest way to record quick videos of your screen. It's easy to use and perfect for hybrid workplaces. FREE & affordable paid plans.

Get Loom

Start Recording for Free

Record your screen to communicate better

Promo Save on Loom

Ad You might find this useful

Wavebox is the revolutionary browser you should be using Now!

Be more productive with apps, tidy tabs, multi-account sign-in, unified search, flexible workspaces, and more...

Get 35% OFF with the Slick Media Wavebox Promo Code (click promo link bottom-right)

Get Wavebox

Wavebox is the revolutionary browser you should be using Now!

Promo Save on Wavebox

Ad You might find this useful

FREE Figma to Webflow Plugin

Designing in Figma and building in Webflow? You need the free Figma to Webflow plugin!

Turn your static Figma designs into clean, production-ready Webflow Websites for free.

Get Figma Webflow

Get FREE Figma to Webflow Plugin

Promo Save on Figma Webflow

Set a vertical height of 100vh
Set the Overflow to 'Auto'

Webflow Nav Menu Mobile Overflow settings

The CSS is as follows:-

Ad You might find this useful

Maximize Your Productivity with Rize AI

Rize is an AI productivity coach that uses time tracking to improve your focus and build better work habits. It is available for macOS and Windows.

With the Slick Media Promo (click promo link bottom right), you can get a 25% discount on your first three months of Rize.

Get Rize

Get Started for Free

Promo Save on Rize


    
      
        
  
    
    

        


  


  
        
          
          .nav-menu {
        
        
          
              overflow: auto;
        
        
          
              height: 100vh;
        
        
          
          }    
        
  



    

  


      
      
        view raw
        
          Webflow Mobile Nav Scroll Overflow
        
        hosted with ❤ by GitHub

A simple fix with minimal code.

Ad You might find this useful

Award Winning VPN Deal

Become invisible online with Surfshark VPN and protect your online presence with: -

✔ 100 VPN Server locations
✔ Alternative email generator
✔ Data breach alerts
✔ Malware protection
✔ Tracker and ad blocker

Get Surfshark

Get Surfshark VPN