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;
}
}
  • 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:

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.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Counting Inversions with JavaScript

https://youtu.be/O2RR6wgMbIQ

Reverse an Array in JavaScript

Getting started with NodeJs

How to Install a Node.js Project Within Composer

How to use Particle.js in your React App

Just JEST — In Just 60 Minutes

Credits — http://oels.byu.edu/student/idioms/proverbs/stitch.html

Getting Started With Cypress.io

Cypress Tree Avenue

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
Abdellah Bahsine

Abdellah Bahsine

I write about topics related to web development.

More from Medium

How to use Sass with React JS

css cover image

Create an animated button using CSS

Loading Third-Party JavaScript

Our Experience Learning Frontend Web development (HTML, CSS, Tailwind and JavaScript) in Side…