CSS Horizontal Navbar

Beyond the basic build already covered in CSS Navigation Bar, a horizontal navbar has its own set of alignment and spacing decisions: where the logo sits, how links are spaced, and what happens when there is not enough room for everything in one row.

In this page:

Logo and Links on Opposite Ends
Centering Nav Links
Spacing Links Evenly
Underline Indicator on Active Link
What Happens When Links Run Out of Room

Syntax

css

ul {
  list-style-type: none;
  display: flex;
}
li a {
  display: block;
  padding: length;
}

Logo and Links on Opposite Ends

A very common horizontal navbar pattern places a logo or brand name on the left and navigation links on the right, using justify-content: space-between on a flex container so the two groups push to opposite edges automatically without manual margins.

Example: Logo and Links on Opposite Ends

css

<style>
nav {
  display: flex;
  justify-content: space-between;
  background: #eee;
  padding: 8px;
}
nav > div {
  background: steelblue;
  color: white;
  padding: 6px 12px;
}
nav > div:last-child {
  background: seagreen;
}
</style>
<nav>
  <div>Logo</div>
  <div><a href="#" style="color:white;">Home</a> <a href="#" style="color:white;">About</a></div>
</nav>

Centering Nav Links

To center navigation links in the middle of the bar rather than pushing them to one side, use justify-content: center on the flex container, or text-align: center on the list if you are using the older inline-block approach.

Note:

Accepted values:
center — items centered
flex-start — items packed at the start
flex-end — items packed at the end
space-between — even gaps, none at the edges
space-around — even gaps, half-size at the edges
space-evenly — equal gaps everywhere, including the edges
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Example: Centering Nav Links

css

<style>
nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  background: #eee;
  padding: 8px;
}
nav a {
  background: steelblue;
  color: white;
  padding: 6px 12px;
}
</style>
<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
</nav>

Spacing Links Evenly

The gap property is the cleanest way to add consistent spacing between horizontal nav links inside a flex container, replacing the older pattern of adding margin-right to every link except the last one.

Note:

Accepted values:
gap: <length> — same gap for rows and columns, e.g. 16px
gap: <row> <column> — two values, e.g. 8px 16px
gap: <percentage> — relative to the container
normal — no gap (initial value; multi-column uses 1em)
row-gap | column-gap — set each direction on its own
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Example: Spacing Links Evenly

css

<style>
nav {
  display: flex;
  gap: 20px;
  background: #eee;
  padding: 8px;
}
nav a {
  background: steelblue;
  color: white;
  padding: 6px 12px;
}
</style>
<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

Underline Indicator on Active Link

A bottom-border underline is a very common way to show the current page in a horizontal navbar, often animated with a transition so the underline slides smoothly when hovering between links instead of appearing instantly.

Example: Underline Indicator on Active Link

css

<style>
a.active {
  border-bottom: 2px solid blue;
  transition: border-color 0.2s;
}
</style>
<a href="#" class="active">Home</a>
<a href="#">About</a>

What Happens When Links Run Out of Room

Without any responsive handling, a horizontal navbar with many links or a narrow viewport will either overflow the container or wrap onto a second line, both of which usually look broken. flex-wrap: wrap lets links drop to a new line gracefully as a fallback, though a dedicated mobile hamburger menu is the standard production solution.

Example: What Happens When Links Run Out of Room

css

<style>
nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: #eee;
  padding: 8px;
}
nav a {
  background: steelblue;
  color: white;
  padding: 6px 12px;
}
</style>
<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</nav>

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Vertical Navbar Next Lesson → CSS Dropdowns