Navbar Intro

By the end of this lesson, you will be able to build a simple horizontal navigation bar using CSS flexbox, with evenly spaced links, padding, hover states, and a clear mental model for how navbar items line up.

What it is

A navbar is a list of links that helps people move around a site. In CSS, the most common modern approach is to make the navbar container a flex container. The links become flex items, so they can sit side by side, share space, and be aligned with simple properties.

Think of the navbar as a row of boxes. The container controls the row, and each link controls its own box. Related terms include display: flex, gap, justify-content, align-items, and flex-wrap.

Why it matters

• It creates a predictable horizontal menu without floats or absolute positioning.
• It makes spacing easier with gap instead of margins on every item.
• It supports hover and focus states that improve usability.
• It can adapt to small screens by wrapping or stacking items.
• It keeps the visual structure separate from the HTML structure.

Syntax or steps

1. Create a container element, such as nav, and give it a class like nav.
2. Set display: flex on the container so its children line up horizontally.
3. Add gap to create space between links.
4. Style the links with padding, color, and text decoration.
5. Add hover or focus styles so users can see which item is active.

Example

/* HTML */
<nav class="nav">
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
</nav>

/* CSS */
.nav {
  display: flex;
  gap: 20px;
  padding: 12px 20px;
  background: #111;
}

.nav a {
  color: #fff;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 6px;
}

.nav a:hover,
.nav a:focus {
  background: #333;
}

Part by part:

• .nav is the navbar container.
• display: flex turns the container into a flex row.
• gap: 20px adds equal space between each link.
• padding: 12px 20px gives the navbar breathing room.
• .nav a styles each link as a clickable box.
• hover and focus states show feedback when a user points to or tabs to a link.

Common mistakes

• Using margins on every link instead of gap. Fix: remove extra margins and use gap on the flex container.
• Forgetting to style the links. Fix: set color, text-decoration, and padding on .nav a.
• Using only :hover and ignoring keyboard users. Fix: add :focus styles too.
• Assuming flex items always stay on one line. Fix: add flex-wrap: wrap if the navbar should move to a new line on small screens.

When to use it

A flex navbar is usually the best starting point for simple menus. A grid navbar can be better when you need precise columns or a more complex layout.

Practice

Guided exercise: Add an active link style so the current page stands out.

.nav a.active {
  background: #0077ff;
  color: #fff;
}

Then add class="active" to one link in the HTML.

Challenge: Make the navbar wrap on small screens. Hint: add flex-wrap: wrap to .nav.

Quick check

Question: What does gap: 20px do in a flex navbar?

Answer: It adds 20 pixels of space between each flex item, such as each link, without adding margins to every item.

Summary

A navbar is easiest to build when you treat the container as a flex row and the links as flex items. The core pattern is display: flex, gap, and link styling. Once that foundation is solid, you can add hover states, active states, and responsive wrapping.