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

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.

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.

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>

🔒

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