🎓 A1Learner
🔍

CSS Navigation Bar

A navigation bar is a list of links styled into a horizontal bar. Flexbox puts the items in a row, and padding turns each link into a clear click target.

Reset the list

The markers, margin and padding come off the list. A dark background gives the bar its own band.

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: navy;
}

Items in a row

Flexbox lays the items side by side. gap keeps a fixed space between them.

ul {
  display: flex;
  gap: 12px;
}

Links as click targets

Block display makes the padded area part of the link. The hover rule paints that area when the pointer is over it.

a {
  display: block;
  padding: 10px 16px;
}
a:hover {
  background-color: green;
}

Example

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 12px;
  background-color: navy;
}
a {
  display: block;
  padding: 10px 16px;
  color: white;
  text-decoration: none;
}
a:hover {
  background-color: green;
}

Key points

  • Navigation is a list of links, so a list is the right element for a bar
  • list-style none removes the markers from the bar
  • A link is inline by default, so its padding does not form a full target
  • display block makes the whole padded link area clickable
  • A hover change should stay clearly visible against the bar colour

In this example, the first rule resets the list and lays its items out in a flex row on a navy band. The second rule makes each link a block with padding, white text and no underline. The third rule paints a link green while the pointer is over it.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

Which change puts the bar items side by side in a row?