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:

<header>
<div class="header-inner">
<h2 class="logo">LO<span>GO</span></h2>
<i id="bars" class="fas fa-bars bars"></i>
<nav class="nav-menu">
<a href="#" class="nav-link">Home</a>
<a href="#" class="nav-link">About</a>
<a href="#" class="nav-link">Services</a>
<a href="#" class="nav-link">Contact</a>
</nav>
</div>
</header>
<nav id="mobileMenu" class="mobile-menu">
<a href="#" class="nav-link">Home</a>
<a href="#" class="nav-link">About</a>
<a href="#" class="nav-link">Services</a>
<a href="#" class="nav-link">Contact</a>
</nav>

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:

*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
height: 1000px;
}
header{
position: relative;
z-index: 2;
background-color: #333;
}
.header-inner{
width: 80%;
margin: 0 auto;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo{
color: #fff;
cursor: default;
}
.logo span{
color: #FFFF00;
}
.bars{
font-size: 26px;
color: #fff;
display: none;
cursor: pointer;
transition: color 0.6s ease;
}
.bars:hover{
color: #FFFF00;
}
.nav-link{
margin-left: 30px;
color: #fff;
text-decoration: none;
transition: color 0.6s ease;
}
.nav-link:hover{
color: #FFFF00;
}
.mobile-menu{
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
z-index: 1;
background-color: #222;
opacity: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 30px;
pointer-events: none;
}
@media screen and (max-width: 768px){
.bars{
display: block;
}

.nav-menu{
display: none;
}

.active{
left: 0;
opacity: 1;
pointer-events: auto;
transition: left 0.6s ease-in-out;
}

.nav-link{
font-size: 24px;
margin: 30px 0;
}
}

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

const bars = document.getElementById('bars');
const mobileMenu = document.getElementById('mobileMenu');
bars.addEventListener('click', function() {
mobileMenu.classList.toggle('active')
})

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.