Let’s build a responsive navbar and hamburger menu using HTML, CSS, and Javascript.

Hello everyone! In this tutorial lets build a responsive navbar and hamburger menu using html,css and a little bit of javascript.

This is how it will look,

Github link :

dev-ggaurav
/
responsive-ham…

Hello everyone! In this tutorial lets build a responsive navbar and hamburger menu using html,css and a little bit of javascript.

This is how it will look,

Alt Text

Github link :



So let’s start with the HTML,

<header class="header">
        <nav class="navbar">
            <a href="#" class="nav-logo">WebDev.</a>
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="#" class="nav-link">Services</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Blog</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">About</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Contact</a>
                </li>
            </ul>
            <div class="hamburger">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
        </nav>
</header>

Here, we have

  • header with the class of header which work as a container of our navbar
  • nav with the class of navbar
  • a link with the class of nav-logo
  • ul with the class of nav-menu
  • inside the ul we have 4 lis with the class of nav-item
  • inside each nav-item we have a link with the class of nav-link
  • for our hamburger I have added a div with the class of hamburger and inside which we have 3 spans with the class of bar



So this is the HTML that we need.



Now let’s add the CSS reset

(Here we will import the font we need and add some basic CSS to reset all the default styles.

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,400&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    font-family: 'Roboto', sans-serif;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}



Now let’s add styles to the elements one by one,

  • header and navbar
.header{
    border-bottom: 1px solid #E2E8F0;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
}
  • hamburger styles
.hamburger {
    display: none;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: #101010;
}
  • basic styles for our other elements
.nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-item {
    margin-left: 5rem;
}

.nav-link{
    font-size: 1.6rem;
    font-weight: 400;
    color: #475569;
}

.nav-link:hover{
    color: #482ff7;
}

.nav-logo {
    font-size: 2.1rem;
    font-weight: 500;
    color: #482ff7;
}



After this, It should look like this,

Alt Text



But It’s not responsive yet, so let’s add the media queries.

@media only screen and (max-width: 768px) {
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 5rem;
        flex-direction: column;
        background-color: #fff;
        width: 100%;
        border-radius: 10px;
        text-align: center;
        transition: 0.3s;
        box-shadow:
            0 10px 27px rgba(0, 0, 0, 0.05);
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-item {
        margin: 2.5rem 0;
    }

    .hamburger {
        display: block;
        cursor: pointer;
    }

}

What this media query does is, hides our nav-menu by setting position: fixed; left: -100%; on it.
Also, we set our hamburger to display: block; so it’s visible now.
We have also added an extra class that is .nav-menu.active which sets left: 0; on the nav-menu. Now we will have to add the javascript which will add this active class on the nav-menu when we click our hamburger.



Let’s add the javascript.

const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");

hamburger.addEventListener("click", mobileMenu);

function mobileMenu() {
    hamburger.classList.toggle("active");
    navMenu.classList.toggle("active");
}

Here the function mobileMenu() also adds an active class on our hamburger and our nav-menu which makes our mobile menu open. we can use the active class on the hamburger to create that X animation when we click on the hamburger. so let’s do that now.

// Inside the Media Query.

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }



It should look like this now,

Alt Text



But there is a catch, the hamburger menu doesn’t close when we click a link. So let’s add that now,

const navLink = document.querySelectorAll(".nav-link");

navLink.forEach(n => n.addEventListener("click", closeMenu));

function closeMenu() {
    hamburger.classList.remove("active");
    navMenu.classList.remove("active");
}

The closeMenu() function removes the active class from both the nav-menu and the hamburger which makes our mobile menu close.

Alt Text

So that’s it guys we built a responsive navbar and hamburger menu with HTML CSS and javascript. Hope u liked it. Share this article. Thank you ?


Print Share Comment Cite Upload Translate
APA
Gaurav | Sciencx (2024-03-28T21:18:49+00:00) » Let’s build a responsive navbar and hamburger menu using HTML, CSS, and Javascript.. Retrieved from https://www.scien.cx/2021/03/13/lets-build-a-responsive-navbar-and-hamburger-menu-using-html-css-and-javascript/.
MLA
" » Let’s build a responsive navbar and hamburger menu using HTML, CSS, and Javascript.." Gaurav | Sciencx - Saturday March 13, 2021, https://www.scien.cx/2021/03/13/lets-build-a-responsive-navbar-and-hamburger-menu-using-html-css-and-javascript/
HARVARD
Gaurav | Sciencx Saturday March 13, 2021 » Let’s build a responsive navbar and hamburger menu using HTML, CSS, and Javascript.., viewed 2024-03-28T21:18:49+00:00,<https://www.scien.cx/2021/03/13/lets-build-a-responsive-navbar-and-hamburger-menu-using-html-css-and-javascript/>
VANCOUVER
Gaurav | Sciencx - » Let’s build a responsive navbar and hamburger menu using HTML, CSS, and Javascript.. [Internet]. [Accessed 2024-03-28T21:18:49+00:00]. Available from: https://www.scien.cx/2021/03/13/lets-build-a-responsive-navbar-and-hamburger-menu-using-html-css-and-javascript/
CHICAGO
" » Let’s build a responsive navbar and hamburger menu using HTML, CSS, and Javascript.." Gaurav | Sciencx - Accessed 2024-03-28T21:18:49+00:00. https://www.scien.cx/2021/03/13/lets-build-a-responsive-navbar-and-hamburger-menu-using-html-css-and-javascript/
IEEE
" » Let’s build a responsive navbar and hamburger menu using HTML, CSS, and Javascript.." Gaurav | Sciencx [Online]. Available: https://www.scien.cx/2021/03/13/lets-build-a-responsive-navbar-and-hamburger-menu-using-html-css-and-javascript/. [Accessed: 2024-03-28T21:18:49+00:00]
rf:citation
» Let’s build a responsive navbar and hamburger menu using HTML, CSS, and Javascript. | Gaurav | Sciencx | https://www.scien.cx/2021/03/13/lets-build-a-responsive-navbar-and-hamburger-menu-using-html-css-and-javascript/ | 2024-03-28T21:18:49+00:00
https://github.com/addpipe/simple-recorderjs-demo