Table Of Contents
Building a Responsive Navigation with Container Queries
Responsive navigation has been a web development staple for over a decade, but we’re often stuck using viewport-based media queries. What if your navigation needs to adapt based on its container width, not the entire screen? Enter container queries, one of CSS’s most exciting recent additions, combined with some clever structural techniques to create a truly flexible navigation system.
The Problem with Media Queries
Traditional media queries respond to viewport width. This works fine when your navigation spans the full width of the page, but modern layouts are more complex. Sidebars, grid systems, and component-based architectures mean your navigation might live inside a container that doesn’t correlate directly to viewport size.
Container queries solve this by letting elements respond to their parent’s dimensions instead. Your navigation can adapt whether it’s in a narrow sidebar or stretched across a wide header, regardless of the overall viewport size.
The Structure
This navigation uses a three-part layout: left section with menu toggle and links, center logo, and right section with more links and actions. The structure is semantic and flexible, using flexbox within a CSS Grid-positioned header.
The header itself defines a container context using container-type inline-size and container-name. This is the foundation that makes everything else work. Any element inside can now respond to the header’s width using container queries instead of media queries.
The Hidden Checkbox Pattern
To toggle the mobile menu without JavaScript, we’re using the classic checkbox hack. A visually hidden checkbox sits at the top of the navigation structure. When checked, it triggers the mobile menu to expand using the adjacent sibling selector.
This pattern has been around forever, but it’s still elegant. The checkbox state is managed entirely by the browser, giving us a stateful toggle mechanism in pure CSS. The label acts as our hamburger button, styled with an SVG menu icon and positioned where users expect to find it.
Container Query Breakpoints
Here’s where it gets interesting. Instead of media queries based on viewport width, we’re using container queries based on the header’s width. At 470px and below, the navigation switches to mobile mode. At 471px and above, it displays as a full horizontal navigation. There’s even a third breakpoint at 701px for additional adjustments.
The beauty of this approach is portability. Drop this navigation into any layout, and it adapts based on its available space. No need to coordinate with global breakpoints or worry about conflicting media queries elsewhere on the page.
The Mobile Menu Transformation
In mobile mode, the horizontal navigation links are hidden, and a hamburger button appears. When activated via the checkbox, a full-screen menu slides down from the header. The menu displays all navigation links in a vertical stack with generous touch targets.
The menu uses max-height for the animation, transitioning from 0 to a calculated viewport height. This creates a smooth reveal effect without JavaScript. The overflow hidden property keeps everything clean during the transition.
The Logo Treatment
The center logo is a clever layered SVG technique. Two SVG elements stack on top of each other using CSS Grid with identical grid areas. The bottom layer is a colored circle, and the top layer is the actual logo mark, offset slightly to create depth.
There’s even a playful detail where the background circle rotates on hover, but only when you interact with it. The animation is paused by default and only runs on hover, conserving resources while adding personality.
Flexbox for Distribution
Each section of the navigation uses flexbox for alignment and distribution. The left and right sections use flex-grow to fill available space, while the center logo is fixed at a specific size. This creates a balanced layout where the logo stays centered regardless of content in the side sections.
The justify-content properties differ between sections. The left uses default flex-start, the center uses place-items for perfect centering, and the right uses flex-end. This asymmetric alignment feels natural and gives clear visual hierarchy.
The Link Styling
Navigation links get subtle hover states with background color changes and slightly darker text. The border-radius on links creates friendly, approachable buttons rather than stark text links. Padding provides comfortable click targets without feeling bloated.
In mobile mode, these same links are recontextualized into a larger format with increased font sizes using a variable font’s width axis. The same elements, just adapted for touch interaction.
Variable Font Magic
The demo uses a variable font with custom font-variation-settings. There’s even a clever use of clamp and tan(atan2()) to create a responsive width value. This mathematical approach creates a smooth progression of font width based on viewport size.
Variable fonts are perfect for responsive design because you can interpolate between weights and widths smoothly. No need for multiple font files or jarring weight changes at breakpoints.
The Styling Hierarchy
The navigation has clear visual weight using custom properties for colors. A light gray background separates it from the page, while the brand color (rebeccapurple, a classic) provides accent. Text is dark and high contrast for accessibility.
The border-radius on the main nav creates soft corners that feel modern without being overly rounded. The subtle box-shadow on buttons provides depth without being heavy-handed.
Accessibility Considerations
The checkbox pattern is keyboard accessible by default. The label responds to both clicks and keyboard activation. Focus states are visible and clear. The menu button has semantic meaning through proper labeling.
In a production environment, you’d want to add ARIA attributes to communicate the menu state to screen readers. The expanded/collapsed state should be announced, and focus management should move appropriately when the menu opens.
Performance and Animation
The transitions are GPU-accelerated where possible. The max-height animation is smooth on modern devices. The rotation animation on the logo uses transform, which is compositor-friendly.
For older devices, you might want to use prefers-reduced-motion to disable animations. The functionality works perfectly without them, and some users prefer a calmer experience.
Why Container Queries Matter
This navigation demonstrates why container queries are revolutionary. The same component works in a full-width header, a sidebar, or even nested inside another layout without modification. It adapts to its context automatically.
Compare this to traditional approaches where you’d need multiple versions of the navigation or complex media query coordination. Container queries make components truly modular.
Portability and Reusability
Because the navigation responds to its container rather than the viewport, you can drop this component anywhere. It works in a narrow blog sidebar just as well as a wide e-commerce header. No JavaScript configuration, no prop drilling, just self-contained responsive behavior.
This is the future of component design. Self-aware elements that adapt to their environment without external coordination.
The Demo
View on Codepen (opens in a new tab)
Browser Support
Container queries are well-supported in modern browsers as of 2023. For older browsers, you can provide fallback styles or use a polyfill. The core functionality degrades gracefully to a standard horizontal navigation if container queries aren’t supported.
The checkbox pattern works everywhere, even in ancient browsers. The SVG logo scales perfectly across all devices. This is a progressively enhanced solution that works universally.
Customization Points
The design uses CSS custom properties for key values, making customization straightforward. Logo size, colors, breakpoints, and spacing can all be adjusted without touching the structural CSS. This makes the navigation adaptable to different brand requirements.
The SVG logos are defined inline, making them easy to swap or style with CSS. Want a different icon? Replace the SVG symbol. Need different colors? Update the custom properties.
Final Thoughts
Container queries fundamentally change how we think about responsive design. Instead of creating layouts that respond to viewport size, we can create components that respond to their context. This navigation is a practical example of that shift.
The combination of container queries, flexbox, CSS Grid, and clever HTML structure creates a navigation system that’s robust, accessible, and maintainable. It’s the kind of solution that works today and will continue working as the web evolves.
Try adapting this technique to your projects. Once you start thinking in terms of container queries, you’ll find opportunities everywhere to make your components more flexible and context-aware.
