Container Queries for Responsive Nav

I recently refactored my site's responsive navigation from media queries to CSS container queries. Instead of asking "how wide is the viewport?", the nav now asks "how wide is my header?"

The change is simple. The header becomes a named container:

.main-header {
  container-name: header;
  container-type: inline-size;
}

Then nav breakpoints use @container instead of @media:

/* before */
@media (min-width: 900px) {
  .nav-toggle { display: none; }
}

/* after */
@container header (min-width: 900px) {
  .nav-toggle { display: none; }
}

Since the header is fixed and spans the full viewport, the behavior is identical right now. But the mental model is better — the nav is responding to its own context, not a global viewport size. If I ever nest this nav inside a sidebar or a narrower layout, it just works.

Container size queries have ~96% global browser support (Chrome 105+, Firefox 110+, Safari 16+). No polyfill needed.