Build a Responsive Navbar with CSS Flexbox

intermediate

By FrontendAtlas Editorial · 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.

Solution

Overview

A strong interview answer treats the navbar as a one-dimensional layout problem: brand, links, and CTA need alignment, spacing, and a small-screen policy. Flexbox handles that directly with display:flex, align-items:center, gap, a deliberate link-group strategy, and either wrapping or a breakpoint. The important trade-off is deciding whether the links own the middle space or the CTA is pushed with margin-left:auto.

Approach A — Wrapping Navbar

Use display:flex, align-items:center, gap, and flex-wrap:wrap on .nav. Keep .links as a flex row with its own gap. In this variant, .cta can use margin-left:auto because the links are not taking over the center with flex:1; at the smallest width, remove that auto margin so the CTA remains reachable.

<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

.nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  background: #222;
  color: #fff;
  padding: 12px 16px;
  border-radius: 8px;
}
.logo {
  font-weight: 700;
}
.links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  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 {
  margin-left: auto;
  background: #e63946;
  color: #fff;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 600;
}
@media (max-width: 480px) {
  .links {
  justify-content: center;
  width: 100%;
}
.cta {
  margin-left: 0;
  text-align: center;
}
}

Approach B — Stacked Mobile Navbar

Use a desktop row layout where .links takes the middle with flex:1 and justify-content:center. At max-width:480px, switch .nav to a column, stretch the items, let links wrap, and center the CTA text. This is the cleanest fit when the interview prompt asks for desktop centering plus a readable small-screen layout.

<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

.nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #222;
  color: #fff;
  padding: 12px 16px;
  border-radius: 8px;
}
.logo {
  font-weight: 700;
}
.links {
  display: flex;
  flex: 1;
  justify-content: center;
  gap: 1rem;
  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) {
  .nav {
  flex-direction: column;
  align-items: stretch;
}
.links {
  flex-wrap: wrap;
  justify-content: center;
}
.cta {
  text-align: center;
}
}

Notes & Pitfalls

Pitfalls

Using `justify-content: space-between` can make the brand, links, and CTA drift without a clear link-group strategy.
Giving `.links` both `flex:1` and relying on `.cta { margin-left:auto; }` mixes two different alignment approaches.
Hiding links at the breakpoint fails this CSS-only prompt because there is no alternate navigation path.
Removing focus outlines makes the nav harder to use with a keyboard.

Edge cases

Long labels should wrap or stack rather than overflow the nav container.
The CTA should remain visible and clickable at 480px and below.
Focus outlines need enough offset so they are not clipped by the navbar.

Techniques

Use `gap` on the flex container and the link group for stable spacing.
Reset `ul` margin, padding, and list-style before aligning the links.
Choose either a wrapping navbar or a stacked mobile breakpoint before writing the final CSS.

Resources

Guides

Frontend interview preparation guideGuide Frontend coding interview questions and prep guideBlueprint JavaScript Problems That Actually Show UpBlueprint Build Great UI in 60 MinutesBlueprint

Preparing for interviews? Use Frontend Coding Challenges first, then move into a concrete Study Plan before targeted Company Prep.

Open frontend interview questions Browse CSS interview questions Open Essential 60 Open Machine Coding Hub Open Frontend Coding Challenges Open System Design Open Interview Prep Guide Open System Design Blueprint Open Framework Prep Paths Open Study Plans Open 7-day crash study plan Open Company Prep