How to make a navigation Bar?

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:

style="background-color:rgba(0, 0, 0, 0);color:#2a3dad" class="has-inline-color">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:

content_8 - incontent_8 -->
Unordered list

On the browser we’ll have something like this:

Unordered list on the browser

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:

list style type value none

So the bullets are removed now:

bullets removed

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:

inline-block property

On the browser that will look like this:

inline-block results

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.

Add some space between the elements

The results on the browser are:

Navigation bar

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.

List elements border

So the navigation bar will look like this:

Navigation bar with borders

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:

width applied to <li></li>

The navigation bar becomes:

Same width elements

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

Aligning text

So the navigation bar will be:

Navigation bar with text aligned

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

Adding a background color

The final navigation bar will look like this:

Final Navigation Bar

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

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/

list style type value none

So the navigation bar will look like:

bullets removed

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.

Adding a border to the navigation bar

Here is the navigation bar on the browser:

Navigation bar

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.

Navigation bar width set to 10%

That gives us the navigation bar below:

Navigation bar with 10% width

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.

Adding space inside the navigation bar elements

This is how it will look like:

Space added inside of the elements

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

Aligning text

Here we are:

Text centered

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

light gray background color

So the navigation bar becomes:

Navigation bar with background color

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.

Hover CSS property

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

Final vertical navigation bar

This is the entire code for a horizontal navigation bar

Code for horizontal navigation bar

This is the entire code for vertical navigation bar

Code for vertical navigation bar

Get new content delivered directly to your inbox

Leave a Reply

%d bloggers like this: