CSS: Creating Navigation Bars

Every website needs a navgation bar to help visitors navigate around the website. This is generally accomplished by putting a top horizontal navigation bar or a side vertical navigation bar.

Navigation bars are created using HTML Lists combined with CSS to make it look more like a Menu with multiple options.

Example:

Vertical Navigation Bar

A simple list is a vertical navigation bar, if we make every list item a hyperlink.

<ul id="navbar">
    <li><a href="/tests">Tests</a></li>
    <li><a href="/studyroom">Q & A Forum</a></li>
    <li><a href="/flashcards">Interview QnA</a></li>
    <li><a href="/library">Tutorials</a></li>
    <li><a href="/testimonials">Testimonials</a></li>
</ul>

The above list can be styled by adding a few simple CSS properties:

CSS:

#navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #EEEEEE;
}

ul#navbar li a {
    display: block;
    color: #000000;
    font-weight:bold;
    padding: 8px 16px;
    text-decoration: none;
}

ul#navbar li a:hover {
    background-color: orange;
    color: white;
}

It's always preferable to use some id or class for providing such styling. Because if we directly style the ul and li elements, like below example,

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #EEEEEE;
}

li a {
    display: block;
    color: #000000;
    font-weight:bold;
    padding: 8px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: orange;
    color: white;
}

then all the lists on our website will look like a navigation bar, while we want only one navigation bar on our website, hence we have used the identifier navbar in our list, which means that only the list element with navbar identifier should be styled this way.

ul#navbar means, a ul list element with id = "navbar"

Live Example →

Horizontal Navigation Bar

When we create a Horizontal navigation bar, the main question is to how to convert a basic List which is vertical to a horizontal list. Well this can be done in two different ways:

Using display:inline

We can use the CSS property display:inline; to remove the line break before and after every list item, because by default list items have property display:block; added to them.

ul#navbar li{
    display: inline;
}

Live Example →

Using float:left

Another way of creating a Horizontal Navigation bar is by adding float:left; CSS property to all the list items. Hence they will arrange themselves in a line.

Here is the CSS code:

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

ul#navbar li {
    float:left;
}

ul#navbar li a {
    display: block;
    color: #000000;
    font-weight:bold;
    padding: 8px 16px;
    text-decoration: none;
}

Below we have explained, why we have used what we have used in the above CSS code, starting from the list items:

• float:left; → To make all the list items float towards the left, making them appear in a line.
• overflow: hidden; → Now as all the list items have the property float:left added to them, hence the list items will not be inside the ul list anymore, resulting into the ul list to occupy minimum height, which in this case is zero. We have applied a background color to demonstrate this. Hence, the overflow hack is used here. We have ot used overflow:auto; because it sometimes add a scroll bar, which we do not want.
• display: block; → Using this CSS property we make the whole link area clickable and not just the link text.
• padding:8px 16px; → We have added a padding of 8px 16px which means, an empty space of 8px will be added at the top and bottom of the link and an empty space is 16px will be added to the left and right side. We add padding to make our navigation menu look for spacious and clean.

Live Example →