1)-What is a navigation bar?

A website is generally made of many pages. To navigate between these pages we need some sort of links that, when clicked, take us to the page we want to go to.

So a navigation bar is a set of links to the appropriate sections/pages in a website.

For example, if you look at the top right corner of this blog, you will see a navigation bar made of “Home” page, “HTML” page, “CSS” page, “About me” page and “Contact” page.

2)-How to make a horizontal navigation bar?

a)- The 1st step is to make an unordered list

If you don’t know what an ordered or unordered list is please check my post: https://purpose-code.com/html-lists/

Let’s say that our navigation bar should contain the following pages: Home, HTML, CSS, JS, About me, Contact.

So the code will be:

On the browser we’ll have something like this:

b)- The 2nd step is to remove the bullets in front of each item

Now that we have our list, we should remove the bullets. To do that we will use the CSS property list-style-type.

For more information about this property please check my post: https://purpose-code.com/list-style-type-css/

The code is:

So the bullets are removed now:

c)- The 3rd step is to align these elements one next to another

Now that we don’t have any bullets anymore, the next step is, instead of having these elements displayed vertically one below another, we want them to be displayed in one line, one next to another.

To do that, we will apply a style this time to the <li><li> elements and not the <ul><ul> tag.

So to change the display of these elements we will use display property.

the default value that is given to the display property of <li><li> elements is inline.

We will change it to inline-block and the code will be:

On the browser that will look like this:

d)- The 4th step is to add some spacing

Now that we have our navigation bar aligned, it is time to add some space between the elements to make it look good.

To do that we will use the CSS property margin to tell the browser we want some margin between the elements.

Let’s have a 30px space between the elements.

The results on the browser are:

e)- The 5th step is to add some styling

At this stage we have made our navigation bar, but it lacks some styling. Let’s add a border to every element and a background color to make it look attractive.

-> First let’s give our elements a border that is blue, and is 3px thick.

So the navigation bar will look like this:

As you can see, not all elements border have the same width. For example the “JS” border has a smaller width than “About me” border.

-> For our elements to have the same width we’ll use the width property. So the code is:

The navigation bar becomes:

-> Now let’s center the text of the elements. To center the text we’ll use text-align property and give it center value.

So the navigation bar will be:

-> Finally, let’s add some background-color to the elements of the navigation bar.

The final navigation bar will look like this:

You can style your navigation bar however you want. This is just one example of how a navigation bar looks like.

3)- How to make a vertical navigation bar?

Same thing as per the horizontal navigation bar, we will start by making an unordered list.

a)- 1st step make an unordered list

b)- 2nd step is to remove the bullets

To remove the bullets in front of each item of the list we will use the CSS property list-style-type. For more information about this property please check my post: https://purpose-code.com/list-style-type-css/

So the navigation bar will look like:

c)- Add some styling

So now normally we have our vertical navigation bar. But let’s add some more styling.

Let’s add a border to the elements of the navigation bar. To add a border we’ll use the border property. Our border will be 3px thick and as a color we’ll choose red.

Here is the navigation bar on the browser:

As you can see, the navigation bar takes all the width of the browser. To make it smaller we’ll apply the width property to the entire list. Which means to the <ul><ul> tag.

Let’s set the width of the navigation bar to 10% of the width of the browser.

That gives us the navigation bar below:

For the horizontal navigation bar we added some space between the elements from the outside. So we used the margin property for that. Now we will add some space but this time from the inside to make the sapce that the elements occupies bigger.

The property we’re going to use is padding.

This is how it will look like:

Before we finish let’s center the text using the text-align property.

Here we are:

Now let’s add some background-color to the elements of the navigation bar.

So the navigation bar becomes:

Finally let’s add some hovering color so that when the user hovers over an element of the navigation bar, the element’s background-color turns into another background-color than light gray.

The property we’re going to use for that is hover.

Now let’s put the cursor on “About me” element to see the color turning into green.

This is the entire code for a horizontal navigation bar

This is the entire code for vertical navigation bar