Responsive Navigation bar with Hamburger menu by using HTML, CSS & JavaScript

Learn how to use HTML, CSS, and JavaScript to construct a responsive navigation bar with hamburger menu. To create a mobile friendly navigation bar for your website, follow our detailed guide.

On several websites and applications, a hamburger menu is an icon that, when tapped or clicked, brings up a navigation bar or side menu. Because it resembles the iconic burger, this is known as the hamburger menu.

A navigation bar that adapts its size and arrangement to the screen size of the device it is displayed on is known as a responsive navbar. This post will demonstrate how to use HTML, CSS, and JavaScript to create a responsive navbar with a hamburger menu.

Before beginning, you should be familiar with HTML, CSS, and JavaScript. To write and save your code, you’ll also need a code editor like Visual Studio Code or Sublime text.

Step 1 : First, make a filder. You can create the files indicated below and give it any name you like.
Step 2 : Create an index.html file in step two. Make sure the extension is .html and the file name is index.
Step 3 : Create a styles.css file in this step. The file name should be styles and carry the .css extension.
Step 4 : Create a JavaScript file called script.js and insert the provided codes into it. Keep in mind that you must create a file with .js

Step 1 : HTML Code

To begin, we must first construct a simple HTML file. We’ll include our navbar’s basic structure in this file. It contains Head Section, Navigation bar container, website name, and Hamburger menu for mobile. And also include Scripts for jQuery (a JavaScript library) for menu interactions.

Copy Text

<!DOCTYPE html>
<html lang="en">
<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 Navigation bar with Hamburger menu | Coding Jasim</title>
</head>
<body>
    <div class="nav-bar">
        <div class="nav-container">
            <div class="brand">
                <a href="#">Coding Jasim</a>
            </div>
            <nav>
                <div class="nav-mobile">
                    <a href="#" id="navigation-toggle">
                        <span></span>
                    </a>
                </div>
                <ul class="nav-list">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">About us</a></li>
                    <li><a href="#">Services</a>
                    <ul class="navigation-dropdown">
                        <li><a href="#">Link-1</a></li>
                        <li><a href="#">Link-2</a></li>
                        <li><a href="#">Link-3</a></li>
                    </ul>
                    </li>
                    <li><a href="#">Careers</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

Step 2 : CSS Code

We will then create our CSS file. This file will produce our navbar hamburger effect using a few fundamental CSS rules.

Copy Text

* {
    margin: 0;
    padding: 0;
    font-family: Segoe UI;
}

.nav-bar{
    height: 70px;
    background: #0e3a48;
}

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

.brand a{
    text-decoration: none;
    color: rgb(97, 123, 252);
}

.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: #0e3a48;
    text-decoration: none;
    color: #fff;
}

nav ul li a:hover{
    background: rgb(1, 131, 12);
    color: #fff;
}

nav ul li a:not(:only-child):after{
    content: '+';
    padding-left: 7px;
}

nav ul li ul li {
    min-width: 190px;
}

nav ul li ul li a{
    padding: 15px;
    line-height: 20px;
}

.navigation-dropdown{
    position: absolute;
    display: none;
    z-index: 1;
}

.nav-mobile{
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    height: 70px;
    width: 70px;
}

#navigation-toggle{
    position: absolute;
    left: 18px;
    top: 22px;
    cursor: pointer;
    padding: 10px 35px 15px 0px;
}

#navigation-toggle span,
#navigation-toggle span::before,
#navigation-toggle span::after{
    position: absolute;
    display: block;
    content: '';
    background: #fff;
    height: 5px;
    width: 35px;
    transition: all 300ms ease-in-out;
}

#navigation-toggle span::before{
    top: -10px;
}

#navigation-toggle span::after{
    bottom: -10px;
}

#navigation-toggle.active span{
    background-color: transparent;
}

#navigation-toggle.active span::before, #navigation-toggle.active span::after{
    top: 0;
}

#navigation-toggle.active span::before{
    transform: rotate(45deg);
}

#navigation-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%;
    }

    .navigation-dropdown{
        position: static;
    }
}

@media screen and (min-width: 799px){
    .nav-list{
        display: block !important;
    }
}

Step 3 : JavaScript Code

Lastly, we must write a JavaScript hamburger function. Create a JavaScript file called script.js, then insert the provided codes into it.

Copy Text

$(document).ready(function() {
    $('nav ul li a:not(:only-child)').click(function(e) {
        $(this).siblings('.navigation-dropdown').toggle();
        e.stopPropagation();
    });

    $('html').click(function(){
        $('.navigation-dropdown').hide();
    })
    $('#navigation-toggle').click(function(){
        $('nav ul').slideToggle();
    })
    $('#navigation-toggle').on('click', function(){
        this.classList.toggle('active');
    });
});

Conclusion

In conclusion, any web developer who want to construct a user-friendly website must be able to create a responsive navbar with a hamburger menu. You can quickly create a mobile-friendly navigation bar with HTML, CSS, and JavaScript by following our detailed instructions. To make sure that your navbar functions properly, don’t forget to test and debug it on various devices. We sincerely hope that this guide has been useful, and we urge you to keep learning and honing your web development abilities.

Download Button with Timer | CodingJasim

Consider developing more eye-catching Navigation bars featured on this website to improve your web development abilities even more, particular with navbars which are listed below.