CSS Horizontal Navigation Bar

Horizontal navigation bar

There are two methods to create a horizontal navigation bar: usingInlineorFloatingList item.

Inline list item

One method to build a horizontal navigation bar is to specify the <li> element as inline, in addition to the 'standard' code in the previous chapter:

Example

li {
  display: inline;
}

Try It Yourself

Example explanation:

display: inline; - By default, the <li> element is a block element. Here, we remove the line breaks before and after each list item so that they can be displayed on a single line.

Floating list item

Another method to create a horizontal navigation bar is to float the <li> elements and specify the layout for the navigation links:

Example

li {
  float: left;
}
a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

Try It Yourself

Example explanation:

  • float: left; - Use float to slide block elements adjacent to each other
  • display: block; - Displaying the link as a block element makes the entire link area clickable (not just text), and allows us to specify padding (if necessary, we can also specify height, width, margin, etc.)
  • padding: 8px; - Make block elements more attractive
  • background-color: #dddddd; - Add a gray background color to each element

Tip:If you need a full-width background color, add background-color to <ul> instead of each <a> element:

Example

ul {
  background-color: #dddddd;
}

Try It Yourself

Horizontal navigation bar example

Create a basic horizontal navigation bar with a dark background color and change the link background color when the mouse is moved over the link:

Example

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;
}
/* Change the link color to #111 (black) when the mouse hovers */
li a:hover {
  background-color: #111;
}

Try It Yourself

Active/Current Navigation Link

Add the 'active' class to the current link so that the user knows which page they are on:

Example

.active {
  background-color: #4CAF50;
}

Try It Yourself

Right-align links

Align the links to the right by floating the list items to the right (float:right;):

Example

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li style="float:right"><a class="active" href="#about">About</a></li>
</ul>

Try It Yourself

border separator

Add border-right The attribute is added to <li> to create a link separator:

Example

/* Add a gray right border to all list items, except the last one (last-child) */
li {
  border-right: 1px solid #bbb;
}
li:last-child {
  border-right: none;
}

Try It Yourself

Fixed navigation bar

Keep the navigation bar at the top or bottom of the page, even if the user scrolls the page:

Fixed at the top

ul {
  position: fixed;
  top: 0;
  width: 100%;
}

Try It Yourself

Fixed at the bottom

ul {
  position: fixed;
  bottom: 0;
  width: 100%;
}

Try It Yourself

Note:Fixed positioning may not work properly on mobile devices.

Gray Horizontal Navigation Bar

An example of a gray horizontal navigation bar with a fine gray border

Example

ul {
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}
li a {
  color: #666;
}

Try It Yourself

Sticky Navigation Bar

Add position: sticky;, to create a sticky navigation bar.

Sticky elements switch between relative and fixed positions based on the scroll position. It is relatively positioned until it encounters the specified offset position in the viewport - then it is 'pasted' at the appropriate location (e.g., position: fixed).

Example

ul {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

Try It Yourself

Note:Internet Explorer, Edge 15 and earlier versions do not support sticky positioning. Safari requires the -webkit- prefix (see the example above). You must also specify top,right,bottom or left At least one, to make the sticky positioning work.

More Examples

Responsive Top Navigation Bar
How to use CSS media queries to create a responsive top navigation.
Responsive Side Navigation Bar
How to use CSS media queries to create a responsive side navigation.
Dropdown Navigation Bar
How to add a dropdown menu in the navigation bar.