Learn how to create a responsive navigation bar with hamburger menu using HTML, CSS, and JavaScript. Follow our step-by-step tutorial to build a mobile-friendly navbar for your website.
Table of Contents
A hamburger menu is an icon used on websites and in applications that, when clicked or tapped, opens a side menu or navigation bar. This is called the "hamburger menu" because it has the shape of the famous burger.
A responsive navbar is a navigation bar that adjusts its size and layout to fit the screen size of the device it is viewed on. It is essential for creating a positive user experience on mobile devices. In this article, we will show you how to create a responsive navbar with hamburger menu using HTML, CSS, and JavaScript.
Watch full tutorial on my YouTube Channel: Watch Here.
Let's start making an amazing responsive navbar with hamburger menu using HTML, CSS, and JavaScript step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our navbar.
After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.
Step 2 (CSS Code):
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our navbar hamburger effect. We will also add some padding and margin properties to ensure that everything looks correct.
This will give our hamburger an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
* {
margin: 0;
padding: 0;
font-family: Segoe UI;
}
.nav-bar{
height: 70px;
background: #262626;
}
.brand{
float: left;
position: absolute;
padding-left: 20px;
line-height: 70px;
font-size: 1.5em;
}
.brand a{
text-decoration: none;
color: white;
}
.nav-container{
max-width: 1000px;
margin: 0 auto;
}
nav{
float: right;
}
nav ul{
list-style: none;
}
nav ul li{
float: left;
position: relative;
}
nav ul li a{
display: block;
padding: 0 20px;
line-height: 70px;
background: #262626;
text-decoration: none;
color: #fff;
}
nav ul li a:hover{
background: #2ab1ce;
color: #fff;
}
nav ul li a:not(:only-child):after{
content: '▼';
padding-left: 5px;
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a{
padding: 15px;
line-height: 20px;
}
.nav-dropdown{
position: absolute;
display: none;
z-index: 1;
}
.nav-mobile{
display: none;
position: absolute;
top: 0;
right: 0;
height: 70px;
width: 70px;
}
#nav-toggle{
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 15px 0px;
}
#nav-toggle span,
#nav-toggle span::before,
#nav-toggle span::after{
position: absolute;
display: block;
content: '';
background: #fff;
height: 5px;
width: 35px;
transition: all 300ms ease-in-out;
}
#nav-toggle span::before{
top: -10px;
}
#nav-toggle span::after{
bottom: -10px;
}
#nav-toggle.active span{
background-color: transparent;
}
#nav-toggle.active span::before, #nav-toggle.active span::after{
top: 0;
}
#nav-toggle.active span::before{
transform: rotate(45deg);
}
#nav-toggle.active span::after{
transform: rotate(-45deg);
}
@media only screen and (max-width: 768px) {
.nav-mobile{
display: block;
}
nav{
width: 100%;
padding: 70px 0 15px;
}
nav ul{
display: none;
}
nav ul li {
float: none;
}
nav ul li a{
padding: 15px;
line-height: 20px;
padding-left: 25%;
}
nav ul li ul li a{
padding-left: 30%;
}
.nav-dropdown{
position: static;
}
}
@media screen and (min-width: 799px){
.nav-list{
display: block !important;
}
} Step 3 (JavaScript Code):
Finally, we need to create a hamburger function in JavaScript. Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file. Remember, you’ve to create a file with .js extension.
$(document).ready(function() {
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
e.stopPropagation();
});
$('html').click(function(){
$('.nav-dropdown').hide();
})
$('#nav-toggle').click(function(){
$('nav ul').slideToggle();
})
$('#nav-toggle').on('click', function(){
this.classList.toggle('active');
});
});Final Output:
Conclusion:
In conclusion, creating a responsive navbar with a hamburger menu is an essential skill for any web developer who wants to create a user-friendly website. By following our step-by-step guide, you can easily build a mobile-friendly navigation bar using HTML, CSS, and JavaScript. Remember to test and debug your navbar on different devices to ensure that it works correctly. We hope this tutorial has been helpful, and we encourage you to continue exploring and improving your web development skills.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
