Build a real navbar, step by step

lesson 6-3 · ~8 min · 20/30

Step 1: semantic markup

Every layout starts with meaning (lesson 3-3), not looks:

<header class="site-header">
  <a class="logo" href="/">Hack U</a>
  <nav class="site-nav">
    <a href="/courses">Courses</a>
    <a href="/dsa">DSA</a>
    <a href="/apply">Apply</a>
  </nav>
</header>

Unstyled, this renders awkwardly: header and nav are block elements, the links are inline. Time for flexbox, at two levels.

Step 2: two flex containers

.site-header {
  display: flex;
  justify-content: space-between; /* logo left, nav right */
  align-items: center;            /* vertical centering */
  padding: 12px 24px;
}

.site-nav {
  display: flex;
  gap: 24px;                      /* even spacing between links */
}

Read it back with the axis mental model from lesson 6-1: the header pushes logo and nav to opposite ends of its main axis, and the nav is itself a flex container spacing its links with gap. Nesting flex containers like this is how most real headers, cards, and toolbars are built.

One more line helps on small screens: flex-wrap: wrap; lets items break onto a second line instead of overflowing.

The markup is ready. In the CSS pane, finish the two rules: make .site-header a flex container that pushes the logo and nav apart and vertically centers them, and make .site-nav a flex row with a 24px gap.

Quiz

In .site-header, what does justify-content: space-between accomplish?

Problem

Which container property lets flex items break onto a new line when they run out of room?