In this tutorial I shall teach you how to make nav bar in HTML and CSS. So without wasting your time, let’s start the tutorial.
Step 1 – Create a blank html document with basic tags
First of all let’s create a blank html document with basic tags “head” and “body”.
In the above screenshot you can see I have created a basic html document with two basic tags “head” and “body”.
Step 2 – Let’s create unordered “ul” list in document
Now let’s create a ul list with list items.
In the above screenshot you can see I have created a ul with li items. And in the list items “li” I have added some anchor tags with some specific labels, which are our navigation links actually.
Now let’s render this unordered list in the web browser to see the changes in our webpage.
In the above screenshot you can see 4 links are appearing with bullets.
Step 3 – Remove bullets from list items
Now let’s remove the bullets from the list items using css.
In the above screenshot you can see I have added a “style” tag in the “head” tag. And written some style properties in the list items of “ul”.
The property “list-style” will remove the bullets by adding the value “none” to it. Now let’s render this in the web browser to see the changes.
In the above screenshot you will see that the bullets are gone.
Step 4 – Remove extra space on left side of the unordered list
Let me inspect and show you that our “ul” list have extra space from left by-default.
In the above screenshot you can see the purple highlighted area is by default padding of ul tag. Now let’s remove this extra padding from the ul list.
In the above screenshot you can see that I have added a property “padding” to our “ul” list and given the value “0”. This will remove the padding from the left.
And let’s render this page to the web browser to see the changes.
In the above screenshot you can see there is no padding on the left side.
Step 5 – Remove underline from anchor tag
Now let’s remove the underline text from the “anchor” tags.
In the above screenshot you can check I have added the “text-decoration: none
” property to the anchor tag to remove the underline.
Now let’s see the changes in the web browser.
In the above screenshot you will see that there is no more underlined text.
Step 6 – Inline the list items
Now let’s inline the list items so that we could start creating our navigation list.
In the above screenshot you can see I have added a property “display: inline-block”.
This will inline all of your list items. Now let’s render it in our web browser to see the changes.
In the above screenshot you can see our all menu items are now inline.
Step 7 – Change the background color of “ul” list
In the above screenshot you can see I have added a property ”background-color: #88d8ff
”. Now let’s render the webpage to view the list.
We have successfully changed the background color
Now let’s add some padding to the list items link to make them more beautiful.
Step 8 – Add padding to list item links
In the above screenshot you can see I have added some properties.
Now let’s understand one by one.
- “display: block” property will make the anchor tag a block level element so that the padding could be applied to the link.
- “padding: 10px” property will add “10px” padding to all the sides “top, right, left, bottom”. This property will make links beautiful and separate from one another.
- “color: #000” property will change the link text color to black to make links more prominent.
- “font-family: Arial” property will change the font family style and make that more beautiful.
Now render our web page to the web browser to see the changes.
In the above screenshot you will see a nice and beautiful navigation bar.
Step 9 – Add a hover effect to menu item
In the above screenshot I have added a “:hover” pseudo element that will change the color of the list item on hover and in the line number 20 I have added “:hover a” this will change the color of the link item on hovering the list item.
Now let’s see in the web browser if the color changes when we hover on the list item.
You can see if we hover on the home list item the color is changed.
Congratulations! You have created a navigation bar in html using CSS.