Navigation That Still Works on a Narrow Screen

Build a header that stacks or collapses cleanly on phones without covering content, and keep links usable with a keyboard. After this, the menu is not the first thing that breaks.

5 min HTML and CSS Web Development Intermediate

Skip ahead: If your header already wraps or collapses cleanly under about 640px and links stay keyboard-reachable, skip to "Do not cover the content", then continue.

The header is the first thing that breaks on a phone: logo beside six links beside a search field, all fighting for 360px. Fix the structure before you invent a hamburger animation.

A header that can wrap

<header class="site-header">
  <a class="logo" href="/">Shop</a>
  <nav class="site-nav" aria-label="Primary">
    <a href="/catalog">Catalog</a>
    <a href="/deals">Deals</a>
    <a href="/help">Help</a>
  </nav>
</header>

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding: 0.75rem 1rem;
  background: #080b0e;
}

.logo { color: #f2f8ff; font-weight: 700; text-decoration: none; }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-left: auto;
}

.site-nav a {
  color: #f2f8ff;
  text-decoration: none;
  padding: 0.5rem 0.25rem;
}

.site-nav a:focus-visible {
  outline: 3px solid #034bff;
  outline-offset: 2px;
}

On a wide screen, logo left, links right. On a narrow screen, flex-wrap lets the nav drop under the logo instead of overflowing. No absolute positioning required for the basic case.

Do not cover the content

If you later make the header position: sticky, reserve space and offset in-page anchors:

.site-header { position: sticky; top: 0; z-index: 10; }
html { scroll-padding-top: 4rem; }

Without scroll-padding-top, a jump link lands under the sticky bar and looks "broken".

⚠ Warning: A hamburger button that does nothing for keyboard users is worse than a wrapping nav. If you add a disclosure menu, the button needs a name, the panel needs to be reachable with Tab, and Escape should close it. Keep the first version simple.

Common mistakes

Tiny tap targets. Give links padding. Fingers are not cursors.
Removing focus outlines on nav links. Style :focus-visible instead.
Hiding the only path to Help on mobile. Collapse chrome, keep the task.

Logo and home

The logo should be a link to home with accessible text (visible text or an alt on the image, or aria-label on the link). A logo that is a bare <div> with a background image fails keyboard and screen reader users.

Active page

.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 4px;
}

Mark the current page in HTML with aria-current="page". Style that state. Colour alone is not enough.

Touch spacing

Links that sit 4px apart will cause mis-taps. Gap and padding are layout tools for fingers, not only for aesthetics. If the wrapping nav feels cramped, increase gap before shrinking type.

What happens if you skip this

Users will rotate the phone sideways just to hit Catalog, or they will leave. You will call it "engagement".

Try it

Build the wrapping header. Shrink until the links drop. Decide whether wrap is enough or you need a disclosure menu. Measure tap targets with DevTools.

If the nav only works with a mouse on a 1440px monitor, what did you actually ship?

About