How to create a responsive header using HTML/CSS and JavaScript

Photo by NordWood Themes on Unsplash

For the past years the use of mobile devices has grown so fast, and many people prefer to use mobiles to surf the web instead of desktops. This is why building websites that are responsive is an essential skill for developers. Responsive design simply means creating websites that looks good on all devices.

In this tutorial, I will show you how to create a responsive header easily. So lets get started!

Create a new folder where we will put our HTML,CSS and JavaScript files. You will need to add the Font Awesome CDN to your document to use the bars icon.

Lets start writing the actual code for our responsive header. Open up your code editor and add this to your HTML document:

I have created the header with a div that contains the other elements of the header. I used the div to make the content take only 80% of the width (we will get to that later in CSS). We also have the logo and the bars icon from Font Awesome, and finally the navigation menu for both the desktop and mobile users.

Now that we have our HTML in place, we need to give it some styles. So lets do just that :D

Here is the styles, I will explain the most important parts:

  • First and foremost, I removed the default padding, margin and set the box-sizing to border box.
  • I set the header to position: relative and the z-index: 2 to make it above the mobile navigation menu.
  • I added display none to bars because we only need them to appear on small devices.
  • I also added a class called active which we will use to show the mobile menu whenever someone clicked on the bars.
  • I used media queries to show the bars icon when the width is less than 768px, and added ‘left: -100%’ and ‘opacity: 0’ to the mobile menu which will make it invisible until someone clicked on the bars icon, we also set ‘pointer-events’ to ‘none’ which is going to prevents all click (This is just in case because opacity: 0 doesn’t mean that you can’t see the pointer if you hover over the nav links…)

This is the most important CSS code you need to understand. Lets now jump into JavaScript:

I used JavaScript to toggle the class active which will remove the ‘left: -100%’ and ‘opacity: 0’ and also the ‘pointer events: none’ we give to the mobile menu. To do that all what you need is to select the bars so that whenever we clicked on them we toggle the active class.

That is it for this tutorial, I hope that you find it useful. Here is my website for more information about me website



I write about topics related to web development.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store