Creating a professional and responsive website header is important for any website. In this tutorial, I will walk you through the process of building a responsive website header using HTML, CSS, and JavaScript, step by step. This guide is designed for beginners, with clear explanations for every line of code. Additionally, you can download the complete source code at the end!
What Is A Responsive Website Header?
A Responsive website header is an header that fits on any media (desktop, mobile and tablet view) without having to swipe left right to see it’s full content. Simply put a responsive Website header is one that automatically adjust itself to fit the device it is open on.
A responsive website header is one of the most important components of modern web design. It serves as the first point of interaction for your users, housing crucial elements like the navigation menu, logo, and call-to-action buttons. Creating a professional-looking and functional header may seem hard for absolute beginners, but with the right guidance, you can build one in no time.
In this blog post, I’ll walk you through creating a responsive website header step-by-step using HTML, CSS, and JavaScript. For those who prefer visual learning, check out the YouTube video: Discover the PROFESSIONAL Website Header Secrets Nobody Tells You.
Take a Look at how the final Result will look like (Mobile View)
By the end of this tutorial, you’ll understand:
- How to structure a website header using HTML.
- How to apply professional styling with CSS.
- How to add interactivity using JavaScript to make the header functional on all devices.
Here is the website we took inspiration from
HTML Structure – Responsive Website Header
The HTML code forms the backbone of our website header. Here’s the structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Header</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<div class="container">
<!-- Logo Section -->
<div class="logo-image">
<img src="images/logo.svg" alt="Logo">
</div>
<!-- Navigation Menu -->
<nav class="nav-menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact Us</a>
<a href="#">Blog</a>
</nav>
<!-- Call-To-Action (CTA) Button -->
<div class="cta-btn">
<a href="tel:234879675849" class="call-btn">234879675849</a>
<span>Call/Whatsapp Line</span>
</div>
<!-- Hamburger Icon -->
<div class="hamburger">
☰
</div>
</div>
</header>
<script src="script.js"></script>
</body>
</html>Key Elements:
<header>: Defines the main container for the header.<nav>: Contains the navigation links.- Hamburger Icon: Used for toggling the menu on smaller screens.
- Call-To-Action Button: Provides a contact option directly accessible from the header.
CSS Styling
The CSS styles make the header visually appealing and responsive. Here’s how we styled it:
/* General Reset*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Arial, Lucida Sans, Sans-Serif, Georgia, Cochin;
line-height: 1.6;
}
header{
background: #fff;
border-bottom: 1px solid #ddd;
}
.container{
max-width: 1140px;
background-color: #f7fafd;
margin: 0 auto;
justify-content: space-between;
align-items: center;
display: flex;
padding: 1rem 2rem;
}
.logo-image img{
height: 25px;
/* width: 120px; */
}
.nav-menu a{
text-decoration: none;
color: #24417c;
font-size: 0.9rem;
margin: 0 15px;
}
.nav-menu a:hover{
background: #24417c;
padding: 5px 15px;
color: #fff;
}
.hamburger{
display: none;
font-size: 1.5rem;
color: #24417c;
padding: 3px 10px;
border: 1px solid #c7d4ee;
}
.hamburger:hover{
background: #24417c;
color: #fff;
font-weight: bold;
}
/* Click to Action Button*/
.cta-btn{
background: #ebedee;
border-radius: 120px;
padding: 3px 15px;
}
.cta-btn .call-btn{
display: inline-block;
font-size: 0.9rem;
text-decoration: none;
color: #24417c;
font-weight: 600;
}
.cta-btn span{
display: block;
font-size: 0.7rem;
}
/* Mobile Responsiveness */
/*Tablet View*/
@media(max-width:840px){
.cta-btn{
display: none;
}
.nav-menu{
display: none;
}
.nav-menu a:hover{
background: #fff;
color: #24417c;
}
.hamburger{
display: block;
font-size: 1.3rem;
color: #ddd;
cursor: pointer;
z-index: 1005;
}
.nav-menu{
display: none; /*Initially hidden*/
flex-direction: column; /* Stack Vertically*/
position: fixed;
top: 0;
right: -100%;
width: 250px;
height: 100%;
background: #24417c;
padding: 20px;
transition: right 0.3s ease-in;
z-index:1000;
}
.nav-menu a{
color: #fff;
font-size: 1rem;
margin: 15px 0;
padding: 0 15px;
width: fit-content;
}
.nav-menu.open{
display: flex;
right: 0;
}
}
/* Mobile Phone View */
@media(max-width:689px){
.cta-btn{
display: none;
}
.nav-menu{
display: none;
}
.hamburger{
display: block;
}
}Below is the Desktop View of the header:
Techniques Used:
- Flexbox: Aligns the header content and creates a responsive layout.
- Media Queries: Adapts the header layout for smaller screens.
- Hover Effects: Improves user interaction by adding visual feedback.
Adding JavaScript Functionality
To make the navigation menu interactive, we use JavaScript. When the hamburger icon is clicked, the menu toggles between open and closed states.
// Select the hamburger and the navigation menu
const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
// Add an event listener to the hamburger button
hamburger.addEventListener("click", () => {
navMenu.classList.toggle("open");
});How It Works:
- Event Listener: Listens for a click event on the hamburger icon.
- Toggling the Class: Adds or removes the
openclass on the navigation menu, changing its visibility.
With this knowledge, you can build a professional and fully responsive header for your website. Don’t forget to download the complete source code and check out the video tutorial for a detailed walkthrough!
