Skip to main content

CSS Horizontal Navigation Bar

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

Inline List Items​

One way to build a horizontal navigation bar is to specify the <li> elements as inline, in addition to the "standard" code from the previous page:

li a {  
    display:  inline;
}

Example horizontal inline navigation bar

Explanation:

  • display: inline; by default, <li> elements are block elements. Here, we remove the line breaks before and after each list item, to display them on one line

Floating List Items​

Another way of creating a horizontal navigation bar is to float the <li> elements, and specify a layout for the navigation links:

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

Example horizontal floating navigation bar

Explanation:

  • float: left; use float to get block elements to float next to each other
  • display: block; allows us to specify padding (and height, width, margins, etc. if you want)
  • padding: 8px; specify some padding between each <a> element, to make them look good
  • background-color: #dddddd; add a gray background-color to each <a> element

Common cases​

Change color on Mouse Hover​

Create a basic horizontal navigation bar with a dark background color and change the background color of the links when the user moves the mouse over them:

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) on hover */  
li a:hover {  
    background-color:  #111;  
}

Add an "active" class to the current link to let the user know which page he/she is on:

.active {  
    background-color:  #04AA6D;  
}

Right-align links by floating the list items to the right (float:right;):

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

Border Dividers​

Add the border-right property to <li> to create link dividers:

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

Fixed Navigation Bar​

Make the navigation bar stay at the top or the bottom of the page, even when the user scrolls the page:

Fixed Top

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

Fixed Bottom

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

Fixed position might not work properly on mobile devices.

Gray Horizontal Navbar​

An example of a gray horizontal navigation bar with a thin gray border:

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

Add position: sticky; to <ul> to create a sticky navbar.

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

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

Internet Explorer do not support sticky positioning. Safari requires a -webkit- prefix (see example above). You must also specify at least one of top, right, bottom or left for sticky positioning to work.

Table of Contents