How to make a navigation bar

Navigation bar consists of links that we use to navigate the other pages or topics of a website. It is usually placed at the top of page. We use the padding, margin, float and position properties to make a navbar.

Example

Let's see how to make a navigation bar.

#nav-container ul

We start by specifying an id for the <nav> element.

Example

<style>
#nav-container ul{
 list-style-type:none;
 background-color:rgb(26,161,242);
 width:100%;
 float:left;
 padding:20px 0px;
}
</style>
Try </>

list-style-type:none; removes the list item markers.
width should be set to 100%.
float:left; must be used so that it covers up the whole content of the unordered list.
padding:20px 0px; represents the padding area in unordered list.

#nav-container ul li

The list items float on the left side afterwards by the float:left;.

Example

<style>
#nav-container ul li{
float:left;
} 
</style>
Try </>

#nav-container ul li

Now style the links that are present in the list items.

Example

<style>
#nav-container ul li a{
 text-decoration:none;
 font-size:16px;
 padding:20px 10px; /* Equal to padding of ul i.e. 20px 0px */
 background-color:rgb(26,161,242);
 color:rgb(255,255,255);
 border-right:1px solid rgb(210,210,210);
}  
</style>
Try </>

padding-top and padding-bottom properties are set to 20px i.e equal to the padding-top and padding-bottom of ul.

:hover

When a user hovers the mouse over the links, some property of CSS should be changed.

Example

<style>
#nav-container ul li a:hover{
box-shadow:1px 5px 2px rgba(210,210,210,0.6);
padding-top:23px;
}
</style>
Try </>

The padding-top and box-shadow properties change on hovering the mouse.

The basic properties of padding, float, position and margin properties are used to make a navigation bar.