CSS Navigation Bar

Imagine entering a large shopping mall. If there are no directory maps, directories, or signs hanging from the ceiling, you will get lost trying to find your favorite stores. A navigation bar (or navbar) is that mall directory map. It is the row of structured links at the top of your webpage that connects all your pages and tools together cleanly. By styling a simple list of links, you can build a clean, responsive navigation menu that stays visible at the top of your page as users browse.

In this page:

Semantic List Structure
Horizontal Navigation with inline-block
Horizontal Navigation with Flexbox
Persistent Fixed Navigation Bars
Active Link indicators

Syntax

css

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

Semantic List Structure

A professional navigation bar starts with a clean HTML structure. By wrapping a list of links inside semantic nav and ul tags, you tell search engines and screen readers exactly how your site is structured.

Note: Use semantic markup to make your navigation menus readable and accessible to screen readers.

Warning: Never build navigation menus out of plain, non-semantic div tags, as search bots will ignore them.

Example: Semantic List Structure

css

<style>
nav ul { list-style: none; margin: 0; padding: 0; background: #333; }
nav li { display: inline-block; }
nav a { display: block; padding: 10px 16px; color: #fff; text-decoration: none; }
</style>
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>

Horizontal Navigation with inline-block

By default, list items (li) are block elements that stack vertically. You can align them horizontally into a clean menu bar by setting their display property to inline-block.

Note: Set the menu item anchors to block display with custom padding to make the entire link box clickable.

Warning: Make sure your inline-block list items are separated with margins to prevent them from crowding.

Example: Horizontal Navigation with inline-block

css

<style>
li {
  display: inline-block;
  margin-right: 10px;
}
</style>
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
</ul>

Horizontal Navigation with Flexbox

Using Flexbox is the modern, standard way to build navigation menus. By setting display: flex on the parent ul tag, you can align elements side-by-side cleanly and control their spacing with properties like justify-content.

Note: Use justify-content: space-between on your flex navbar to push your brand logo and menu links to opposite ends of the screen.

Warning: Apply your flex properties to the parent ul tag, not to individual list items, to ensure correct spacing.

Example: Horizontal Navigation with Flexbox

css

<style>
ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
}
li {
  background: steelblue;
  padding: 8px 12px;
}
li a {
  color: white;
}
</style>
<ul>
  <li>Logo</li>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
</ul>

Persistent Fixed Navigation Bars

To keep your navigation bar visible at the top of the screen as the user scrolls, you can set its position to fixed and lock its width to 100%. This keeps your site easy to navigate even on long pages.

Note: Add top padding to your body container to prevent the fixed header from covering up your content.

Warning: Make sure your fixed headers are responsive so they do not cover too much screen space on mobile devices.

Example: Persistent Fixed Navigation Bars

css

<style>
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: darkorange;
  color: white;
  padding: 10px;
  text-align: center;
}
.content {
  margin-top: 60px;
}
.content p {
  background: #f0f0f0;
  padding: 12px;
  margin-bottom: 10px;
}
</style>
<nav>Always visible while scrolling</nav>
<div class="content">
  <p>Scroll down to see the navbar stay fixed. Paragraph 1.</p>
  <p>Paragraph 2.</p>
  <p>Paragraph 3.</p>
  <p>Paragraph 4.</p>
  <p>Paragraph 5.</p>
  <p>Paragraph 6.</p>
  <p>Paragraph 7.</p>
  <p>Paragraph 8.</p>
</div>

Active Link indicators

When users navigate your site, they need to see which page they are currently on. You can create an active link indicator by applying a custom class (like class="active") to the current page's menu link and styling it with unique colors.

Note: Use border-bottom indicators on your active class links to create a clean, modern tab design.

Warning: Make sure your active class styles are updated dynamically when navigating pages.

Example: Active Link indicators

css

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

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Opacity Next Lesson → CSS Vertical Navbar