Codelab: Responsive Navigation
Build a navigation bar that switches from a hamburger menu on mobile to a horizontal link bar on desktop.
Set up your project
In this codelab, you'll build one of the most important responsive patterns on the web: a navigation bar that adapts to screen size. On desktop, navigation links sit in a horizontal row. On mobile, there's no room for all those links, so they're hidden behind a hamburger button (those three horizontal lines you see on every mobile site). When you tap the hamburger, the links appear in a vertical dropdown.
Every major website uses this pattern: Google, YouTube, GitHub, Amazon, Twitter/X, Instagram — they all have horizontal nav on desktop and a hamburger menu on mobile. You'll build this using pure CSS (no JavaScript), which teaches you the limits and capabilities of CSS-only responsive solutions.
Open a terminal (Ctrl + Alt + T) and run:
- mkdir ~/responsive-nav — Creates the project folder.
- cd ~/responsive-nav — Moves into the folder.
- touch index.html style.css — Creates the two files we need.
- code . — Opens VS Code with the folder loaded.