CSS Navigation Bars

CSS Navigation Bars

A navigation bar is basically a list of links.

Example 1: Vertical Navigation Bar

To build a vertical navigation bar, you can style the <a> elements inside a list.

Example 2: Horizontal Navigation Bar

There are two ways to create a horizontal navigation bar. Using inline or floating list items.

Example 3: Fixed Navigation Bar

To create a fixed navigation bar (stays at the top or bottom of the page), use position: fixed.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}