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

YouTube Excerpt: 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_source=youtube&utm_medium=social&utm_campaign=video_webflow-basics_aug-2025&utm_content=webflow-navbar-and-megamenu_description-link - Link to the cloneable: https://webflow.com/made-in-webflow/website/webflows-navbar-mega-menu-2 - Webflow’s Navbar & Mega Menu – Full Playlist: https://www.youtube.com/playlist?list=PLYPkp78mi3rYYsVC5gFamMg3ieAzNw9z_ - Diasable Page Scrolling With CSS: https://youtu.be/XVnzraxKWVM 🔥 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: https://www.linkedin.com/in/francescocastronuovo/ Or we can get to know each other on X: https://x.com/francescoflow Or why not? Even on Instagram: https://www.instagram.com/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

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...

Read Full Article 🔍

Curious about Webflow’s Navbar & Mega Menu – Ep. 2: Fully Responsive + Lock Scroll On Open (No Code Tutorial)'s Color? Explore detailed estimates, salary breakdowns, and financial insights that reveal the full picture of their profile.

Source ID: RZMODbiSFOA

Category: color style guide