Responsive Navigation Menu

Project: create a navigation bar that remains usable when the browser window becomes narrow.

Use <nav> and real <a> elements. A horizontal Flexbox row can wrap without clipping on small widths. If you want a compact native disclosure, <details> provides keyboard-activatable open and closed states without writing JavaScript.

For a production navigation drawer with custom focus trapping or state synchronization, use the appropriate JavaScript and accessibility design. This project deliberately remains CSS-only.

The first prototype wraps links. The improved version uses a disclosure that keeps all destinations available regardless of pointer hover.

Make links visible and keyboard focusable.

HTML

<nav class="site-nav" aria-label="Main menu"><strong>Atlas</strong><a href="#home">Home</a><a href="#courses">Courses</a><a href="#about">About</a></nav>

CSS

.site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px; background: #eff6ff; border-radius: 10px; } .site-nav strong { color: #1e40af; margin-right: auto; } .site-nav a { color: #1d4ed8; text-decoration: underline; }

Rendered output

Observe: At smaller widths, the links move onto another line instead of overlapping.

Build a compact layout with a real, clickable summary control.

HTML

<header class="site-header"><strong class="wordmark">Atlas</strong><details class="site-menu"><summary>Menu</summary><nav aria-label="Main menu"><a href="#home">Home</a><a href="#courses">Courses</a><a href="#about">About</a></nav></details></header>

CSS

.site-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 15px; background: #0f172a; color: white; border-radius: 11px; } .wordmark { font-size: 20px; letter-spacing: .4px; } .site-menu { min-width: 140px; color: #0f172a; background: #fff; border-radius: 7px; } .site-menu summary { cursor: pointer; padding: 9px 12px; font-weight: 700; } .site-menu nav { display: grid; padding: 5px; gap: 4px; } .site-menu a { color: #1e40af; text-decoration: none; padding: 8px; border-radius: 6px; } .site-menu a:hover, .site-menu a:focus-visible { background: #dbeafe; text-decoration: underline; }

Rendered output

Observe: The menu opens using native browser behavior with reachable links.

The first prototype wraps links. The improved version uses a disclosure that keeps all destinations available regardless of pointer hover.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• Avoid relying exclusively on :hover to open essential navigation.

• CSS cannot turn a static div into a fully accessible menu button.

Use this checklist to assess the completed CSS project:

• Every destination is a real anchor.
• All menu items work with keyboard and touch input.
• At narrow widths, no link is clipped or covered.

Add a Contact link, verify keyboard navigation, and choose a design that still works without JavaScript.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Usable navigation takes precedence over elaborate visual effects.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.