TaskBuild .nav: display: flex, justify-content: space-between, align-items: center, padding: var(--space-md) var(--space-lg), border-bottom: 1px solid var(--border). .nav .brand is bold + var(--primary). .nav-links is a flex row with gap: 24px, links have color var(--text), text-decoration: none, padding: 8px. .nav-links a:hover { color: var(--primary); }. .nav .cta is a button with background var(--primary), color white, padding 8px 16px, border-radius var(--radius-md). @media (max-width: 640px) { .nav-links { display: none; } }.
Capstone 5: Navigation header (responsive)
200 XP14 min
Theory
A responsive header that ships everywhere
- Brand on the left.
- Primary nav links in the middle.
- CTA button on the right.
On mobile (<640px), the nav links hide and a hamburger appears. The actual menu-toggle JS is for the JS track β here we just style the layout + the visible/hidden states via a checkbox hack.
π
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β card required, cancel anytime.
Sign up β free trial βFirst 10 lessons in each track are free. No card needed for those.