Heapcoding

How to create navigation bar in HTML and CSS

Published July 1, 2022

In this tutorial I shall teach you how to create navigation 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”.

How to create navigation bar in HTML and CSS
How to create navigation bar in HTML and CSS

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.

How to create navigation bar in HTML and CSS
How to create navigation bar in HTML and CSS

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.

How to create navigation bar in HTML and CSS
How to create navigation bar in HTML and CSS

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.

How to create navigation bar in HTML and CSS
How to create navigation bar in HTML and 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.

How to create navigation bar in HTML and CSS
How to create navigation bar in HTML and CSS

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.

How to create navigation bar in HTML and CSS
How to create navigation bar in HTML and CSS

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.

How to create navigation bar in HTML and CSS
How to create navigation bar in HTML and CSS

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.

How to create navigation bar in HTML and CSS
How to create navigation bar in HTML and CSS

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.

How to create navigation bar in HTML and CSS

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.

How to create navigation bar in HTML and CSS

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.

How to create navigation bar in HTML and CSS

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.

How to create navigation bar in HTML and CSS

In the above screenshot you can see our all menu items are now inline.

Step 7 – Change the background color of “ul” list

How to create navigation bar in HTML and CSS

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.

How to create navigation bar in HTML and CSS

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

How to create navigation bar in HTML and CSS

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.

How to create navigation bar in HTML and CSS

In the above screenshot you will see a nice and beautiful navigation bar.

Step 9 – Add a hover effect to menu item

How to create navigation bar in HTML and CSS

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.

How to create navigation bar in HTML and CSS

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.