Flexbox / INTERACTIVE PRACTICE

Build a responsive navbar

Keep a brand and navigation tidy on wide screens, then stack them on small screens.

Jump to editor ↓

What you are building

Create a navigation layout that stays readable on desktop and mobile.

Your mission

At 800px, place the brand and menu on opposite ends of one row. At 320px, stack the brand above the menu and let menu items wrap without overflowing. This exercise focuses on layout: the menu labels are non-navigating text in the sandbox.

  1. Arrange the brand and menu at opposite ends of a vertically centered row.
  2. Make .nav-links a wrapping flex container with a gap of at least 12px.
  3. At widths up to 480px, switch .navbar to a column and align its contents to the start.
  4. Keep all four menu labels visible at both test widths.

Keep any supplied classes so the checks can find your layout. Need a refresher? Flexbox wrapping.

Why this practice comes now

You have practiced alignment and wrapping. Combine them with the media queries taught in CSS to make navigation fit two screen sizes.

Concepts to recall
  • Alignment — Arrange the brand and menu using their shared parent.
  • Wrapping — A nested flex container can wrap its own children independently.
  • Media queries — Change layout rules when the viewport crosses a breakpoint.

Start with one action

Run the starter at 800px and 320px. In the HTML, identify the two direct children of .navbar before editing that parent’s CSS.

Progress loads in this browser

Your code and completion are saved in this browser. Pass all solution checks to complete this practice in My progress. Editing or resetting code keeps your completion.

Live preview

These controls resize both your preview and the target. Checks always test both widths. Scroll within a preview to inspect the full layout.

Preview supports text, headings, and layout elements with classes. Scripts, links, forms, and external resources are disabled.

Target preview

Combine nested flex containers, wrapping, and a media query. This reference stays unchanged as you edit. Match the layout; your text and colors can be different.

Mobile target · 320px

Includes your current work as HTML, CSS, and JavaScript files. How to run it on your computer →

Stuck? Open one hint at a time, try a change, and check again before opening the next. The complete answer stays in the separate explained solution.

Hint 1

The brand and the menu form one group, while the labels form another. Consider which parent controls each arrangement.

Hint 2

First solve the wide view: distribute the brand and menu on the main axis, then align them on the cross axis.

Hint 3

Let .nav-links wrap and add space between its labels. This inner container can stay a row while the outer navbar changes direction.

Hint 4

Use the CSS course’s media-query pattern at 480px to change .navbar to a column. With the axes changed, which alignment puts its children at the start? Check both widths again.

See the explained solution
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 480px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }
}

The outer flex container distributes the brand and menu. The inner container wraps labels as space runs out. The media query changes only the outer direction, so the menu remains a wrapping row. Add these rules to the starter CSS, then run the checks.

Choose another practice →