Build a Responsive Navbar with CSS Flexbox

intermediate

By FrontendAtlas Team · Updated Jul 9, 2026

Practice a realistic frontend interview prompt: build a responsive navigation bar with Flexbox, preserve readable links, keep the CTA reachable, and explain how the layout behaves when space gets tight.

What you'll practice:

Creating a flex container for navigation layout
Aligning brand, links, and CTA without extra wrappers
Using `gap` instead of margin hacks
Using `margin-left: auto` or flexible link groups intentionally
Handling small screens with wrapping or a mobile breakpoint
Keeping links readable and accessible
Avoiding overlap, overflow, and hidden navigation

Requirements

Use the existing `nav.nav`, `.logo`, `.links`, and `.cta` markup.
Turn `.nav` into a flex container with vertical alignment and clear spacing.
Set `.links` to `display: flex`, add `gap`, and optionally use `flex: 1` with `justify-content: center` when links should occupy the middle.
Use `margin-left: auto` only if `.links` is not taking the center role.
At `max-width: 480px`, stack or wrap the layout cleanly without hiding links.
Do not add JavaScript or a hamburger menu for this CSS-only challenge.

Acceptance criteria

`.nav` uses `display: flex`.
Items are vertically centered with `align-items: center`.
Brand stays on the left on wider screens.
Links are displayed as a horizontal list on wider screens.
CTA stays visually separated and reachable.
Spacing uses `gap`, not fragile manual margins only.
Layout does not overflow with normal link labels.
At `max-width: 480px`, layout stacks or wraps cleanly.
Links remain visible and clickable.
Focus styles are not removed.
No JavaScript is required for this basic layout.

Expected behavior

A strong solution should:

Keep brand, links, and CTA on one readable row when there is enough width.
Let the link group participate in Flexbox rather than relying on text alignment alone.
Use a small-screen rule so long labels, the CTA, and focus outlines do not overlap.
Preserve all navigation links in the DOM and visible layout.

Implementation notes

For a centered-link layout, let `.links` take available space with `flex: 1` and center its children.
For a CTA-push layout, keep `.links` content-sized and apply `margin-left: auto` to `.cta`.
Use `flex-wrap` for a wrapping variant or `flex-direction: column` at the breakpoint for a stacked variant.
Keep default focus behavior or add an explicit `:focus-visible` outline.

Common mistakes

Using `justify-content: space-between` without considering link group behavior.
Forgetting to reset `ul` margin, padding, and list-style.
Hiding links on mobile without an alternate navigation path.
Using fixed widths that cause overflow.
Using only `text-align: center` instead of actual Flexbox alignment.
Forgetting `flex-wrap` or a breakpoint.
Making the CTA unreachable on narrow screens.
Removing focus outlines from links.

Interview explanation

Flexbox is a good fit for a navbar because the layout is mostly one-dimensional: brand, navigation links, and actions sit along a row and need alignment, spacing, and wrapping. I would use a flex container, reset the list styles, use gap for spacing, and decide whether the mobile behavior should wrap or stack based on content length. I would also test long labels, keyboard focus, and narrow widths because nav bugs usually appear when real content is longer than the mock.

Testing checklist

Resize below 480px and confirm links and CTA remain visible.
Tab through every nav link and the CTA to confirm focus remains visible.
Test a longer link label and confirm the layout does not overflow.
Compare the centered-link approach with the `margin-left: auto` CTA-push approach.

FAQ

Is Flexbox or Grid better for a navbar?

Flexbox is usually better because a navbar is mostly one-dimensional: items align along a row or column. Grid can work, but it is usually more structure than needed unless the navbar has a true two-dimensional layout.

How do you make a Flexbox navbar responsive?

Start with a row layout, allow wrapping or switch to a stacked layout at a small breakpoint, keep links visible, and test long labels so the navbar does not overflow.

Should a responsive navbar hide links on mobile?

Not without an accessible alternate path. This CSS-only challenge keeps links visible by wrapping or stacking them instead of building a JavaScript hamburger menu.

What do interviewers look for in a CSS navbar prompt?

They usually look for clean layout reasoning, correct Flexbox usage, responsive behavior, readable spacing, and awareness of accessibility and overflow edge cases.

<html> HTML

<nav class="nav">
  <div class="logo">Brand</div>
  <ul class="links">
    <li><a href="#">Docs</a></li>
    <li><a href="#">Pricing</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
  <a class="cta" href="#">Sign up</a>
</nav>

# CSS

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  margin: 2rem;
  background: #fafafa;
}
/* TODOs:
  1) Turn .nav into a flex container, vertically center its items, and add gap.
  2) Set .links to display:flex and gap;
  optionally use flex:1 with justify-content:center.
  3) If .links is not taking the center role, use margin-left:auto on .cta to push it right.
  4) At max-width:480px, stack or wrap cleanly without hiding links.
*/
.nav {
  background: #222;
  color: #fff;
  padding: 12px 16px;
  border-radius: 8px;
}
.logo {
  font-weight: 700;
}
.links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.links a {
  color: #fff;
  text-decoration: none;
}
.links a:focus-visible,
.cta:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 3px;
}
.cta {
  background: #e63946;
  color: #fff;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 600;
}
@media (max-width: 480px) {
  /* Stack or wrap the navbar here */
}

Live preview updates as you type

Building preview…