Webflow’s Navbar & Mega Menu – Ep. 2: Fully Responsive + Lock Scroll on Open (No Code Tutorial)

In this second episode, we pick up exactly where we left off — with a clean, fully functional desktop navbar. But today, we’re going to make it fully responsive — adjusting spacing and layout across breakpoints. We’ll also tackle the dreaded viewport height issue, where using "vh" units on mobile can cause strange layout bugs. You’ll learn what "dvh" are and when to use them. And finally, we’ll add a professional touch: a small CSS snippet that automatically blocks page scroll when the nav menu is open. Watch the full build — and get ready for what’s next. Coming up: dropdown menus, animations, and beyond. 📂 Helpful Resources: Supasaito: https://www.supasaito.com/en?utm_sour... Link to the cloneable: https://webflow.com/made-in-webflow/w... Webflow’s Navbar & Mega Menu – Full Playlist:    • Rebuilding Webflow's Navbar & Mega Menu   Diasable Page Scrolling With CSS:    • Disable Page Scrolling in Webflow Without ...   🔥 If you liked the video, feel free to leave a comment, hit the like button, and subscribe to my channel. 😁 --- My Webflow public profile: https://webflow.com/@francescocastro We can talk on LinkedIn:   / francescocastronuovo   Or we can get to know each other on X: https://x.com/francescoflow Or why not? Even on Instagram:   / francescocastronuovo   --- 0:00 Intro 1:20 First steps: Menu button, flexbox and link underline 8:39 Open state and nav menu height 14:34 Nav menu vertical layout, spacing and proper alignment 21:34 More on flexbox, wrap property and Webflow hidden property values 30:51 Even more on flexbox: Landscape and Portrait breakpoints 34:08 vh an dvh units: How to properly set the height of the nav menu 39:09 Removing hover interactions 41:19 Blocking page scroll when the nav menu is open 45:17 Outro #webflow #madeinwebflow #nocode #webflowtutorial