CSS NAVIGATION BARS

Having easy-to-use navigation is great for any website. With CSS you can transform boring HTML menus into good-looking navigation bars.

NAVIGATION BAR = LIST OF LINKS

A navigation bar needs standard HTML as a base. We will build the navigation bar from a standard HTML list. A navigation bar is basically a list of links.

EXAMPLE

<ul>
<li><a href=”default.asp”>Home</a></li>
<li><a href=”news.asp”>News</a></li>
<li><a href=”contact.asp”>Contact</a></li>
<li><a href=”about.asp”>About</a></li>
</ul>

VERTICAL NAVIGATION BAR

To build a vertical navigation bar, you can style the elements inside the list, in addition to the code above:

EXAMPLE

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

VERTICAL NAVIGATION BAR EXAMPLES

Create a basic vertical navigation bar with a gray background color and change the background color of the links. When the user moves the mouse over them.

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;
}

/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}

ACTIVE/CURRENT NAVIGATION LINK

Add an “active” class to the recent link to let the user know which page he/she is on.

EXAMPLE

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

CENTER LINKS & ADD BORDERS

Add text-align:center to <li> or <a> to center the links. Add to center the links. Moreover, add the border property to add a border around the navbar. If you also want borders inside the navbar (navigation bar), add a border-bottom to all elements, except for the last one.

Example

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

li:last-child {
border-bottom: none;
}

FULL-HEIGHT FIXED VERTICAL NAVBAR

Create a full-height, “sticky” and side navigation. Some of the examples might not work properly on mobile devices.

EXAMPLE

ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /* Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}

INLINE LIST ITEMS

One way to build a horizontal navigation bar is to specify the elements as inline.

EXAMPLE

li {
display: inline;
}

FLOATING LIST ITEMS

Another way of creating a horizontal navigation bar is to float the elements and specify a layout for the navigation links.

EXAMPLE

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

HORIZONTAL NAVIGATION BAR EXAMPLES

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.

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

ACTIVE/CURRENT NAVIGATION LINK

Add an “active” class to the current link to let the user know which page he/she is on.

EXAMPLE

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

Right-Align Links

Right-align links 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>

BORDER DIVIDERS

Add the border-right property to create link dividers.

EXAMPLE

/* 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.

Example

Fixed Top

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

Fixed Bottom

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

GRAY HORIZONTAL NAVBAR

Gray horizontal navigation bar with a thin gray border.

Example

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

li a {
color: #666;
}