How to create a responsive Navigation Bar with HTML, CSS and jQuery— step by step tutorial

Photo by Greg Rakozy on Unsplash

A navigation bar is one of the main components of a website, in my opinion the most important one, it is in fact the first section that the user sees when he/she enter a website and it links to the other main parts.

In this article we’ll go through all the steps required to build a simple navigation bar and we will see how to make it responsive. I will pretend to create a navigation bar for a Portfolio Page that has 4 sections: “About Me”, “Projects”, “CV” and “Contacts”, but feel free to change it as you like the most!

At the end we will have something similar to this:

HTML first

The tag used for the navigation bar is the <nav> tag, so we’ll start from there. We just need to open and close the nav tag and leave some space in between to add all the other tags.

Now that we have that in place, we can add our list of links.

To create a list we can use the <ul> tag, that stands for “unordered list” 
it will be the container for our “list items” (<li>) . The ul tag will go inside the nav tag.

Then, we can start adding our list items that will contain the links to our website main sections (the 4 sections I was talking about before).

For each list item we need to add the name of the corresponding section, but also make sure that once the user clicks on it, the page will scroll down until it reaches the related section. This can be accomplished with the tag <a> or “anchor tag”. You can put each anchor tag inside the list item and then write the name of the section inside the anchor tag.

At this point we will have something like this.

Doesn’t look like a navigation bar yet, I know, but that’s almost all the HTML we need in order to create it, after that it’s all just about styling it!

Now, to make those links clickable we need to add to our anchor tags an “href” attribute. This attribute will contain the id of the section to link, with this syntax “#correspondingId.

Let’s imagine that we have 4 sections with id respectively: #aboutMe, #projects, #cv and #contacts and let’s add these id in our anchor tags via the href attribute.

Our navbar will look like this:

It’s time to style it a little bit.

Then comes CSS

I bet you feel an uncontrollable urge to get rid of those bullet point, am I right? If the answer is yes, don’t worry, this is the next thing we are going to do. We just need to write in our CSS file the following 3 lines, which meaning is “all my list item don’t need to have a list style”.

Already better

Now let’s get rid also of that underline, to do that we can add this other 3 lines in our CSS:

Let’s imagine that we are building an horizontal navbar and we want it to take the entire width of the screen, we can do this adding to the nav tag a property “width: 100vw” where 100 means 100% and vw means viewport width, so 100% of the viewport width.

At this point you may not notice any difference, but if we add a background color property to our nav tag and set it to a color of our choice, for example

we’ll see something like this:

The reasons why it might appear a little annoying white space along the sides of our navigation bar is because some elements like body or ul have a default value for margin. We can remove it adding margin: 0 to both elements. Plus, if you don’t like that indentation for the list, you can also add padding: 0 to ul.

Our navbar will now take the entire width.

It’s time to place that links in a row, this can be done in different ways. Here are 2 of them:

  1. adding display: inline; to li

or

2. adding a property of display: flex to ul

I’ll proceed with the second option, because it will gives us more flexibility (pun intended) when we will go to make our navbar responsive.

Now we need to space those list items, and we can do this by setting a margin of our choice, I suggest you use a multiple of the viewport width like we did with the width of the nav tag. I’ll use a margin of 2vw for the left and right side.

We can also set the font size to a multiple of the viewport, in this case I prefer using a multiple of the viewport height, analog to the viewport width and indicated with vh.

Now, if you want to create some space on the top and bottom of our navbar as well, you can add a little padding to our <a> elements. You can also remove that blue default color, I’ll put for example some black.

Almost decent!

Now it would be cool if, everytime we hover over the name of the section that would be highlighted somehow. We can realize this with the “hover” selector, which syntax is element:hover{ /*property that will change when I move the mouse on the element here*/.

Make it responsive

This layout is fine if you are using a computer or tablet, but here is what happens if you see it from your mobile phone:

One of many solutions to avoid this weird alignment is to create a vertical navigation bar that is hidden and only appear when you click on a button.

First of all let’s make the navbar vertical. To do this we will take advantage of the fact that we used a display: flex for our unordered list. We just need to apply a property of flex-direction and set it to column. To make sure that this is done only when we are on small screens we can use what is called a media query.

(flex-direction: column)

We also need to make sure that the <a> element will take the entire width of the screen so that when we hover over it we can see the color change for all the width (in order to do this we can give a display: block property to a)

(display: block)

and that there is no space on the top or bottom of it(giving margin: 0 to li).

(margin: 0)

At this point we are almost done. We just need to add the button to press in order to open/close the navigation menù. You can put it wherever you like, for this time I’ll put it in the <ul> tag as first element, to visualize it on top of the item lists and to make sure that it has the same alignment of the item list (it is shown in column).

Then we are going to make it disappear if we are on a wide screen

And re-appear if we are on a small screen

Let’s move it to the left.

jQuery time!

Before starting, we need to add the jQuery library.

<script src="http://itnext.io/jquery-3.4.0.min.js"></script>

There are 2 ways of doing this:

  1. If you are working with separate files you can place it in the head tag. Be sure to put it under the link tag with your css file and before the script containing the code that you are going to use.

2. If you are working on the same file (HTML) put it right before your script.

Now we are going to add a little animation to the navbar. We’ll make sure that when the navbar is open, clicking on “ ✖” the menù will slides up and disappear. Then, it will appear a hamburger button “”. Clicking on it, the menù will slides down. In order to make it in the most simple possible way we are going to use jQuery.

Since jQuery works with selectors (classes, tag names, ids…) we need to call a function on these elements only if they already exists on the DOM. We can do this in two ways:

  1. inserting a tag <script> with our little script at the end of the hmtl file.
  2. calling the ready function on $(document), that executes the code inside of it only if the DOM is ready. This is the recommended way if you are using a separate file for html and js. I will go on with this one:
$(document).ready(function(){
//insert code here
});

Inside of it we are gonna add a function that does something when the button is clicked.

$("document").ready(function(){
$("button").click(function(){
//insert code here
});
});

And this something is:

if the text in the button is “ ✖” replace it with “☰”. Else (if the text is “☰”) replace it with “ ✖”.

if($("button").text() == "☰"){
$("button").text("
");
}else{
$("button").text("☰");
}

Then, we are going to add the “toggle effect” and this is really simple to do in jQuery. We just need to call the function on the element that we want to toggle (in our case all our list items). Also, we can decided with which speed our element will toggle. I really like this effect when it is “slow”, so I will add it in the function.

$("li").toggle("slow");

Here is the complete code:

This is the navbar on small screens when the menù disappear

… And we are done 🎉 now just go ahead and add your personal touch! 🙂

You can find the complete project at this link.