How to Create a Responsive Navbar with Hamburger Menu Using HTML, CSS and JavaScript

Faraz

By Faraz - Last Updated:

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.

Join us on Telegram
how to create a responsive navbar with hamburger menu using html, css and javascript.png
Read Alsocrafting-an-engaging-pet-food-shop-template-html-css-javascript.webpCrafting an Engaging Pet Food Shop Template: HTML, CSS, JavaScript

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Conclusion
  6. Preview

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 a hamburger menu using HTML, CSS, and JavaScript.

Watch the 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.

Prerequisites:

Before starting this tutorial, you should understand 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. Let's break down the HTML code step by step:

1. Basic HTML Structure

<!DOCTYPE html>
<html lang="en">
  • <!DOCTYPE html>: Declares the document as HTML5.
  • <html lang="en">: Specifies the language as English.

2. Head Section

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Responsive Navbar with Hamburger Menu</title>
</head>
  • <meta charset="UTF-8">: Supports multiple languages and special characters.
  • <meta http-equiv="X-UA-Compatible" content="IE=edge">: Ensures compatibility with older versions of Internet Explorer.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Makes the website responsive on mobile devices.
  • <link rel="stylesheet" href="styles.css">: Connects the external CSS file for styling.
  • <title>Responsive Navbar with Hamburger Menu</title>: Sets the webpage title.

3. Navigation Bar Structure

Navbar Container

<div class="nav-bar">
    <div class="nav-container">
  • <div class="nav-bar">: Main wrapper for the navigation bar.
  • <div class="nav-container">: Container to structure the navbar.

Brand Logo / Website Name

<div class="brand">
    <a href="#">CodewithFaraz</a>
</div>
  • Displays the website name or logo.
  • Clicking it redirects to the homepage (# means no actual link).

Hamburger Menu for Mobile

<div class="nav-mobile">
    <a href="#" id="nav-toggle">
        <span></span>
    </a>
</div>
  • <div class="nav-mobile">: Contains the hamburger menu for mobile.
  • <a href="#" id="nav-toggle">: Toggles the mobile menu.
  • <span></span>: Represents the hamburger icon, styled using CSS.

Navigation Links

<ul class="nav-list">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a>
        <ul class="nav-dropdown">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 1</a></li>
        </ul>
    </li>
    <li><a href="#">Careers</a></li>
    <li><a href="#">Contact</a></li>
</ul>
  • <ul class="nav-list">: Unordered list for menu items.
  • <li><a href="#">Home</a></li>: Each <li> represents a menu item.
  • Dropdown Menu:
    • <ul class="nav-dropdown"> is a sub-menu inside "Services".
    • It appears when the user hovers over "Services".

4. Scripts for jQuery and JavaScript

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="script.js"></script>
  • Loads jQuery (a JavaScript library) for handling the menu interactions.
  • Loads script.js, which contains custom JavaScript to:
    • Toggle the hamburger menu on mobile.
    • Show/hide the dropdown menu.
Read AlsoCreate an Exciting Coming Soon Landing Page using HTML and CSS.jpgCreate an Exciting Coming Soon Landing Page using HTML and CSS

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. Let's break down the CSS code step by step:

1. Global Styles

* {
    margin: 0;
    padding: 0;
    font-family: Segoe UI;
}
  • * applies styles to all elements:
  • margin: 0; → Removes default margins.
  • padding: 0; → Removes default padding.
  • font-family: Segoe UI; → Uses Segoe UI as the default font.

2. Navigation Bar Styling

.nav-bar {
    height: 70px;
    background: #262626;
}
  • .nav-bar: Defines the height and background color of the navbar.

3. Logo/Brand Styling

.brand {
    float: left;
    position: absolute;
    padding-left: 20px;
    line-height: 70px;
    font-size: 1.5em;
}

.brand a {
    text-decoration: none;
    color: white;
}
  • .brand: Positions the logo/website name inside the navbar.
    • float: left; → Aligns it to the left.
    • position: absolute; → Keeps it fixed.
    • line-height: 70px; → Centers text vertically.
    • font-size: 1.5em; → Increases the text size.
  • .brand a: Styles the link.
    • text-decoration: none; → Removes underline.
    • color: white; → Makes text white.

4. Navigation Container

.nav-container {
    max-width: 1000px;
    margin: 0 auto;
}
  • .nav-container:
    • Limits the navbar width to 1000px.
    • Centers it using margin: 0 auto;.

5. Navigation List Styling

nav {
    float: right;
}
nav ul {
    list-style: none;
}
nav ul li {
    float: left;
    position: relative;
}
  • nav { float: right; }: Positions the menu on the right.
  • nav ul { list-style: none; }: Removes bullet points from the list.
  • nav ul li { float: left; position: relative; }:
  • Aligns menu items horizontally.
  • position: relative; → Needed for dropdown menus.

6. Navigation Links

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:
    • Makes menu items block elements (display: block;).
    • Adds padding and centers text (line-height: 70px;).
    • Sets default background (#262626 → dark gray).
    • Makes text white.
  • .nav ul li a:hover:
    • Changes background to light blue (#2ab1ce).
    • Keeps text white.

7. Dropdown Menu

nav ul li a:not(:only-child):after {
    content: '▼';
    padding-left: 5px;
}
  • Adds a ▼ (down arrow) after menu items that have a dropdown.
.nav-dropdown {
    position: absolute;
    display: none;
    z-index: 1;
}
  • position: absolute; → Places dropdown below the parent.
  • display: none; → Hides it by default.
  • z-index: 1; → Ensures it appears above other elements.
nav ul li ul li {
    min-width: 190px;
}
nav ul li ul li a {
    padding: 15px;
    line-height: 20px;
}
  • .nav-dropdown list items are 190px wide.
  • Dropdown links have smaller padding.

8. Mobile Menu (Hamburger Icon)

.nav-mobile {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    height: 70px;
    width: 70px;
}
  • display: none; → Hidden by default.
  • Becomes visible on smaller screens (@media styles).

9. Hamburger Menu Styling

#nav-toggle {
    position: absolute;
    left: 18px;
    top: 22px;
    cursor: pointer;
    padding: 10px 35px 15px 0px;
}
  • #nav-toggle: Styles the hamburger menu button.
  • cursor: pointer; → Makes it clickable.

Hamburger Icon (Three Lines)

#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;
}
  • Creates three lines using ::before and ::after.
  • Uses transition: all 300ms ease-in-out; for smooth animation.
#nav-toggle span::before {
    top: -10px;
}
#nav-toggle span::after {
    bottom: -10px;
}
  • Positions top and bottom lines above/below the middle line.

10. Animated Menu Toggle (X Shape)

#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);
}
  • .active class:
    • Hides the middle line (background-color: transparent;).
    • Rotates top/bottom lines to form an "X" shape.

11. Responsive Styles for Mobile (@media Queries)

@media only screen and (max-width: 768px) {
  • Styles only apply when the screen is 768px or smaller.
.nav-mobile {
        display: block;
    }
    nav {
        width: 100%;
        padding: 70px 0 15px;
    }
    nav ul {
        display: none;
    }
    nav ul li {
        float: none;
    }
  • .nav-mobile { display: block; } → Shows the hamburger menu.
  • nav ul { display: none; } → Hides the menu items (until toggled).
  • nav ul li { float: none; } → Makes items stack vertically.
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;
    }
  • Increases padding for better spacing.

12. Ensuring Menu is Always Visible on Large Screens

@media screen and (min-width: 799px) {
    .nav-list {
        display: block !important;
    }
}
  • For screens larger than 799px, the menu is always visible.
* {
    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 script.js and paste the given codes into your JavaScript file. Remember, you’ve to create a file with .js extension. Let's break down the JavaScript code step by step:

1. Ensure the DOM is Ready

$(document).ready(function() {
  • This ensures that the script runs only after the HTML document has fully loaded.

2. Toggle Dropdown Menus

$('nav ul li a:not(:only-child)').click(function(e) {
    $(this).siblings('.nav-dropdown').toggle();
    e.stopPropagation();
});
  • This applies to <a> elements inside <li> items that have siblings (i.e., links that have a dropdown menu).
  • When clicked, the .nav-dropdown (submenu) toggles (shows/hides).
  • e.stopPropagation(); prevents the click from affecting other elements (so clicking inside the menu won’t close it).

3. Close Dropdowns When Clicking Outside

$('html').click(function(){
    $('.nav-dropdown').hide();
});
  • If the user clicks anywhere on the page (outside the dropdown), all dropdowns are hidden.

4. Toggle Navigation Menu on Mobile

$('#nav-toggle').click(function(){
    $('nav ul').slideToggle();
});
  • When the hamburger menu (#nav-toggle) is clicked, the <ul> (menu list) slides down/up.

5. Animate Hamburger Menu

$('#nav-toggle').on('click', function(){
    this.classList.toggle('active');
});
  • When the hamburger menu (#nav-toggle) is clicked, the class active is toggled.
  • This is used for styling animations (e.g., changing the bars into an "X" icon).
$(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:

how to create a responsive navbar with hamburger menu using html, css and javascript.gif
Read AlsoCreating a Youtube Sidebar with HTML, CSS, and JavaScript.jpgCreating a YouTube Sidebar with HTML, CSS, and JavaScript: A Step-by-Step Guide

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 😊

Tags: responsive navbar, hamburger menu, html, css, javascript, how to make a responsive navbar with hamburger menu, responsive navigation bar with html; css and javascript, create a mobile-friendly navigation bar with hamburger icon, building a responsive navigation menu using html; css and javascript
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺