Create horizontal navigation bar using CSS.

CSS Navigation Bar Example

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • CSS
  • 2 mins read

In this tutorial, you will learn how to create a navigation bar using CSS.

A navigation bar is a horizontal list of links that often provide primary navigation for a site.

In the below HTML example, the <a> elements are coded within an unordered list because that's the preferred way to do this.

HTML Example

<nav id="nav_bar">
  <ul>
    <li><a href="https://vinish.ai" target="_blank">Home</a></li>
    <li><a href="https://www.vinish.ai/category/html" target="_blank">HTML</a></li>
    <li><a href="https://www.vinish.ai/category/css" target="_blank">CSS</a></li>
    <li><a href="https://www.vinish.ai/about-vinish-kapoor" target="_blank">About Me</a></li>
  </ul>
</nav>

CSS for Navigation Bar

In the below CSS example, the bullets are removed from the <ul> element and the display of the <li> elements are set to inline. The background color for the bar is black, and the text color of the <li> elements are white. Also, the underline is removed from the links and the <li> elements have a right border that is white.

Then, because of the padding for the <a> elements set the size of the links within the line items, the entire area for each link is clickable.

#nav_bar ul {
  list-style: none;
  padding: 1em 0;
  background-color: black;
}
#nav_bar li {
  display: inline;
}
#nav_bar a {
  padding: 1em 2em;
  text-decoration: none;
  color: white;
  font-weight: bold;
  border-right: 2px solid white;
}

Output

 

See the Pen
CSS Responsive Navigation Bar by Vinish Kapoor (@foxinfotech)
on CodePen.