How to make a navigation menu for all screen sizes?

Ever struggled with a website's menu that just won't cooperate on your phone or tablet? Creating a responsive navigation menu is the key to solving this puzzle. In this article, I'll break down the steps of crafting a responsive navigation menu, to ensure your website looks great and works smoothly on any device. Let's dive in!

Let's make a general navigation menu first

Let the fun begin! We will start with making a general navigation menu. We will be using simple HTML, CSS, and JavaScript. So, let's go!

What is a navigation menu?

The menu that helps you navigate to products and services pages from the top of a web page is a navigation Menu.
For example, here is the navigation menu of GitHub:

What is the purpose of a navigation menu?

 To help your clients navigate to your products and services pages. Make it responsive so it can serve its purpose better.

Let's write the HTML

We list products and services on our navigation menu. Assume your website name is XYZ. You sell product 1 and product 2.
Your website name will remain unchanged in responsive situations. But the appearance of your products and services may change. So, always use a different class for elements that may change in appearance. And keeping all of them inside a div element like this:

looks ugly? I know. Let's add some CSS now to make it look decent enough to use on your website.

Styling the navigation with CSS

Look into the Code above.
".wholesection" div has two children div elements. Let's make it display flex in the CSS. Also, the anchor tags (the nav links) need some styling. I have set "pink" as the background color here. Feel free to change it.

Looks better now! But there is a problem. The navigation menu is not responsive. On a mobile screen, all the elements will come too close to each other.

A big concern of Web Design: responsiveness

Responsiveness is one of the biggest concerns of web development. Always ensure that the menu items are visible in all screen sizes. That will improve your user experience score and improve your SEO ranking.

What are the different screen sizes?

Smartphones have the smallest screen width (up to 430px or smaller). Then, comes tablets and iPads (bigger than 430px and smaller than 1024px). Then, there is the desktop screen (generally bigger than 1024px and can be up to 3840px).
The most popular Smartphone screen size is 360px X 800px (width X height). The most popular tablet screen size is 768px by 1024px. The most popular desktop screen size is 1920px by 1080px. Check out the screen resolution stats by StatCounter for additional information.

Let's make it responsive for tablet and PC screen sizes

We will use media queries to make it responsive. Media queries will trigger different CSS rules for different screen sizes.

Make it responsive for tablet/iPad

Tablet and iPad screen width ranges between 431px and 1024px. Let's make one media query for tablet screen sizes. I will make bigger space in between the products. For that, I have to declare the minimum screen width and maximum screen width in the media queries. See how I write the media queries rule in the CSS.

Achieve it with CSS

As you can see, The media query has overwritten the initial flex gap value of 10px with a 20px gap.

Make it responsive for Desktop

Desktop screen size typically ranges between 1025px to 3840px. That's a pretty long range. Thus, I suggest you use multiple media queries. For desktop screen, you may want to do the following:

1. Increase the height of the navigation bar.
2. Increase the font size a little bit.

Let's do that!

Achieve it with CSS

I have used two media queries here.
When the media query triggers, it still shows flex.
But, media queries overwritten the gap value for the desktop screen.

Make it responsive for mobile

Here comes the juicy part.
To make the navbar responsive on mobile devices; you will need to do the following.

1. transform the desktop navbar into a mobile navbar.
2. hide it with transform(X) CSS rule.
3. make a hamburger button on the top of the screen.
4. add functionalities of the hamburger button. (more on that later)

We will achieve all these functionalities with HTML, CSS, and JAVASCRIPT. So, let's go!

Transform the desktop navbar into a mobile navbar

Inside the code,
the div element with the .menus class shows the menus. Simply change the flex-direction from row to column. That will make it appear as a mobile navbar. We will increase the width as well. We will give a higher Z-index value. That will make it appear above the other contents on the web page.
Before that, we need to give the div element a fixed position.
Why fixed position?
It's because we want to position it from the position of the viewport. Giving a fixed position cuts the element from normal HTML flow. So, we can customize the appearance of the div element much more effectively. It will be preciously a fixed pixel far from the viewport!

Achieve it with the CSS

Check the "Result" section.
We have successfully transformed the navigation menu for a mobile screen!

next step: transform the mobile menu

As you can see, the mobile menu bar is visible without having to click on any hamburger button. So, we will transform the mobile menu by 100% as per the X-axis. This will hide the mobile menu on the right side. (because I have set the HTML overflow-X to "hidden")

writing the CSS

Now, the navbar is hidden on a mobile screen!

last step: put a mobile hamburger button

Now, we need a hamburger button to access the mobile navbar.
Just in case you are wondering, here is the hamburger button of GitHub on a mobile screen:

The hamburger button generally has a fixed top-right position on the mobile viewport. In the next section, we will be creating one!

Make a Hamburger Button

The hamburger button contains three div elements.  They are placed column-wise with some gap in between them. We will use HTML and CSS to make it.

What to do in HTML?

We will make a div called hamburger. We will create three child div elements inside of the parent div element.

What to do in CSS?

1. We will display the hamburger div as a flexbox. 
2. We will set the flex-direction to column. 
3. Then, we will give some gaps ( say 4px gap) between them. 
4. We will declare the height, width, and color of the child div elements.
5. We will hide the hamburger button for big screens through media queries.

See the code below:

CodePen preview

Do you see the hamburger button?
It's on the right side now!
Now;

1. the hamburger button is visible on a mobile screen.
2. the hamburger button is not visible for a screen width bigger than 430px.

Add the functionalities 

Up to now, we only have been able to place the hamburger button. However, four functionalities are missing. Those are:

1. once you click the button, the child div elements should rotate and form an "X" sign.
2. the mobile menu should pop open.
3. once you click again, the child div elements should undo the rotation and appear on its previous shape.
4. the mobile menu has gone invisible to the right side of the screen.

making of "X" sign by rotation

Whenever we add functionality, we need some JavaScript. So, connect your HTML page with your empty external JavaScript page first. Now we will write some JavaScript code.

what to do in HTML

Write some attribute to those child div elements of the hamburger button. We want to change those attribute data with JavaScript for the functionality.

what to do in JavaScript

1. we will use the " querySelector " to target the parent .hamburger div element and save it as a constant.
2. we will use the " eventListener " to listen for the "click" event on the parent .hamburger div element.
3. once the "click" event occurs, we will run an anonymous function.
4. Inside the anonymous function, there will be an "if-else" statement. If the first child has the "rotation" attribute value set to "off", it will be changed to "on". Else, if it is set to "on", as a response to the "click" event, it will be set to "off".

So, each time "click" happens, the attribute data will toggle between "on" and "off" with JavaScript.

what to do in CSS

Write CSS for the child div elements with [ rotation= "on"]. Because, We will rotate the top and bottom child div elements. Also, write CSS for the middle child div element with [ display= "off"]. Because, we will hide the middle div once the "click" happens on the hamburger button. This is how we will make that "X" sign.
Now check out my code:

CodePen preview

Now, click the hamburger button inside the "result" and see what happens.
Do you see the "X" sign?
Good!

making the mobile menu appear on the screen

Now, the hamburger button is rotating. It looks fancy but does not show the mobile navigation menu. We will need to add this little functionality using a small JavaScript code.

what to do in HTML

The div element with the .menus class shows the navigation menu. Previously, we gave it the transform rule in the CSS. However, we want to undo the transform rule once we click the hamburger button. For that, we will give that div element a new attribute and attribute value as we did earlier.

what to do in JavaScript

I have saved that div element as a Constant named "navigationMenu" in JavaScript.
Inside the " eventListener ",
after the "click" happens, we will change the attribute data of the hamburger button. We will do that using the "setAttribute" functionality.

what to do in CSS

We will write CSS rule of the ".menus" div with its new attribute data. In the CSS rule, we will undo the transform rule.

CodePen preview

Now, try clicking on the hamburger button. That will bring the mobile menu to the screen.

what is a "sticky" navigation bar?

A navigation bar with a fixed position as you scroll down the web page is called a "sticky" navigation bar. A "sticky" navigation bar remains visible on the screen during your web session. I give you my example. The navigation bar of my portfolio is the "sticky" one.

how to make the navigation bar "sticky"

There are multiple ways to do that.
But the simplest way is by only using the CSS.

Let's do it

You just give your navigation bar the "fixed" position. And that's it!

only with CSS

Let's give the div element with the ".wholesection" class a fixed position. And the job is done!

Preview

Try scrolling the "Result" section down. The mobile navbar now has become "Sticky".

I want a non-sticky navigation bar

In that case, you have to avoid using fixed positioning of any HTML element. You can use absolute positioning instead. Absolute positioning is the positioning of an HTML element from its closest parent element that has relative positioning. Hence, it won't be positioned from the viewport anymore.

Changes to do in HTML

We will put the .hamburger div inside the ".wholesection" div that contains the navigation menu. Why? Because we will give .hamburger div absolute positioning to make it non-sticky.

Changes to do in JavaScript

No changes are required in JavaScript in this case.

Changes to do in CSS

Simply do this two things:

1. give the parent the ".wholesection" div relative position.
2. give the child .hamburger div absolute position with right and top value. That will make the child div position itself from the parent div.

No longer it will be positioned as per the viewport.

Preview

Now, we have made a "non-sticky" navigation bar successfully.

How to make a dropdown menu?

There are some simple steps:

1. Include the dropdown content in the HTML file.
2. Style it using CSS and set the display to none.
3. Include a dropdown button.
4. Use JavaScript to listen for the click event in that drop-down button.
5. Once the "click" happens, change the attribute of the HTML element using JavaScript.
6. Write CSS for the element with the changed attribute value. And style the drop-down appearance.

what to do in HTML?

1. Include the categories in the HTML file, including the caret-down logo . Put them inside a div called .category.
2. Give each product and the Caret down logo a unique ID name.
3. give the div element of .subcategory class a new attribute. We want to change its attribute dynamically.
4. I also gave a new attribute to the second product. We will change its attribute data on the "click" event as well.

what to do in JavaScript?

1. Save the category section, subcategory, first product, second product, and the drop-down button as variables.
2. Add an event listener for the drop-down button.
3. Once "click" happens, run a "if-else" statement.
4. Inside the statement; if the attribute value of "display" is "off", set it to "on" and vice versa.
5. Inside the statement, if the screen width is smaller(mobile screen), also  set the " display mobile category " attribute data to "on" for the second product. That will make the second product appear properly on the mobile screen.

What to do in CSS?

Give the respective CSS for the changed attribute data. Style how you want your categories and sub-categories to appear on a mobile screen once the attribute data is "on". Check the code below:

Preview

Now, check the functionality of the drop-down button for both the mobile and desktop screens.
Are they working ?
Sweet!

Now, we have a responsive navigation bar that shows all its sub-categories.

the source code to play around with

Now is the time to play around. Download my source code for the sticky version and non-sticky version of the navigation menus and play around. You learn more when you play around.

F.A.Q

Should I use div or nav?

You can use either of them. No problem!

How many media queries should I use?

There is no hardcore rule for that. But try to keep 4-8 media queries for decent responsiveness of the page.

Should I use Flexbox or Grid?

I prefer using Flexbox for styling the content.

Can I use the hamburger icon instead?

Sure! You can use the icon instead of making one.

How can I create a responsive navigation menu using only CSS?

That is not possible! You cannot add functionalities with CSS, such as opening the navigation menu with a click on the Hamburger button.

Credits

Photo by olia danilevich.