Responsive Navigation

Responsive Nav

Build a nav that shows a horizontal bar on desktop and collapses to a hamburger menu on mobile using only CSS and a checkbox toggle.

Example

.nav-toggle { display: none; }
.nav-links { display: flex; gap: 1.5rem; }
@media (max-width: 767px) {
  .nav-toggle { display: block; }
  .nav-links { display: none; flex-direction: column; }
  #menu:checked ~ .nav-links { display: flex; }
}

CSS

Full Editor

Pro Tip

For production, add JS to set aria-expanded for accessibility.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned