CSS Navigation Bar

Vertical Naviagation Bar

Horizontal Navigation Bar

Navigation Bar

Skilled useage of the navigation bar is very important for any website.

Using CSS you can create a nice navigation bar instead of a boring HTML menu.

Navigation Bar = list of links

As a standard HTML basis, a navigation bar is a necessary.

In our example we will create a standard HTML list navigation bar.

The navigation bar is basically a list of links, so it makes sense to use the <ul> and <li> elements:

Example

<ul>
   <li><a href="#home">Home page</a></li>
   <li><a href="#news">News</a></li>
   <li><a href="#contact">Contact</a></li>
   <li><a href="#about">About</a></li>
</ul>

 Try It! 

Now, let's remove margin and padding from the list:

Example

ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
}

 Try It! 

Example analysis:

• list-style-type:none - Remove the small flag in front of the list. A navigation bar does not need list markers

• margin:0; padding:0 - Remove the default settings of the browser and set the margin and padding to 0

The code in the above example is the standard code used for vertical and horizontal navigation bars.

Vertical Navigation Bar

In the above code, we only need the style of the <a> element to create a vertical navigation bar:

Example

a
{
     display:block;
     width:60px;
}

 Try It! 

Example description:

• display:block - displays the link of the block element, so that the whole becomes a clickable link area (not just the text), it allows us to specify the width

• width:60px - The block element is the maximum width by default. We want to specify a width of 60 pixels

  
  

Tip: See an example of a full-style vertical navigation bar.

Note: Be sure to specify the width of the <a> element in the vertical navigation bar. If you omit the width, IE6 may produce unexpected effects.

Vertical Navigation Bar Example

Create a simple vertical navigation bar instance, when the mouse moves to the option, modify the background color:

Example

ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
     width: 200px;
     background-color: #f1f1f1;
}
 
li a {
     display: block;
     color: #000;
     padding: 8px 16px;
     text-decoration: none;
}
 
/* Move the mouse to the option to modify the background color */
li a:hover {
     background-color: #555;
     color: white;
}

 Try It! 

Active Navigation Bar Element

After clicking the option, we can add the "active" class to standardize which option is selected:

Example

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

 Try it! 

Create Links and Add Borders

You can add text-align:center style to <li> or <a> to center the link.

You can add a border attribute to the border <ul> to make the navigation bar have a border. If you want to add a border to each option, you can add border-bottom to each <li> element :

Example
ul {
     border: 1px solid #555;
}
 
li {
     text-align: center;
     border-bottom: 1px solid #555;
}
 
li:last-child {
     border-bottom: none;
}

 Try It! 

Fixed Position of Navigation Bar at Full Screen Height

Next we create a fixed navigation bar with full screen height on the left and scrollable content on the right.

Example

ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
     width: 25%;
     background-color: #f1f1f1;
     height: 100%; /* Full screen height */
     position: fixed;
     overflow: auto; /* If there are many options in the navigation bar, scrolling is allowed */
}

 Try It! 

Note: This example also can be used on mobile devices.

Horizontal Navigation Bar

There are two ways to create a horizontal navigation bar. Use inline or float list items.

Both methods are good, but if you want to link to have the same size, you must use the floating method.

In-line List Item

One way to create a horizontal navigation bar is to specify elements. The above code is standard inline:

Example

li
{
     display:inline;
}

Try It! 

Example analysis:

• display:inline - By default, the <li> element is a block element. Here, we delete each list item before and after the newline character to display one line.

Tip: Check example of the horizontal navigation bar style.

Floating list item

In the example above, the links have different widths.

For all links with equal width, float the <li> element and specify the width of the <a> element:

Example

li
{
     float:left;
}
a
{
     display:block;
     width:60px;
}

 Try It! 

Example analysis:

• float:left - slides using floating block elements are next to each other

• display:block - displays the link of the block element, so that the whole becomes a clickable link area (not just the text), it allows us to specify the width

• width:60px - The block element is the maximum width by default. We want to specify a width of 60 pixels

Tip: Check the example completely style horizontal navigation bar .

Horizontal Navigation bar example

Create a horizontal navigation bar and modify the background color after moving the mouse to the option.

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;
}
 
/*Move the mouse to the option to modify the background color */
li a:hover {
     background-color: #111;
}

 Try It! 

Active Navigation Bar Element

After clicking the option, we can add the "active" class to standardize which option is selected:

Example

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

 Try It! 

Link Right Alignment

Set the rightmost option of the navigation bar to right alignment (float:right;):

Example

<ul>
   <li><a href="#home">Home page</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! 

Add Dividing Line

<li> Use border-right style to add dividing line:

Example

/* Add a dividing line for everything except the last option (last-child) */
li {
     border-right: 1px solid #bbb;
}
 
li:last-child {
     border-right: none;
}

 Try It! 

Fixed Position of Navigation Bar

You can set the navigation bar of the page to be fixed at the head or bottom:

Fixed position to the head

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

 Try It! 

Fixed position at the bottom

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

 Try It! 

Note: This example can be used on mobile devices.

Horizontal Navigation Bar with Gray Background

Horizontal navigation bar with gray color

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

 Try It! 

More Examples

• Responsive top navigation - How to use CSS3 media queries to create a responsive navigation.

• Responsive sidebar navigation - How to use CSS3 media queries to create a sidebar navigation.

• Navigation drop down menu - Set the drop-down menu inside the navigation bar