Let's build a responsive navbar and hamburger menu using HTML, CSS, and Javascript.
Tags: css, javascript, beginners, tutorial
Published: 2021-03-13 09:08:24

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jtlfuif5znb251k4r9zc.gif)

Github link : 

{% github dev-ggaurav/responsive-hamburger-tutorial %}

# So let's start with the HTML,

``` 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 `li`s 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 `span`s 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.

``` CSS
@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`

``` CSS
.header{
    border-bottom: 1px solid #E2E8F0;
}

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

* `hamburger` styles

``` CSS
.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
``` CSS
.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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bn6yu5tlo21go91u1tlh.png)

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

``` CSS
@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.

``` 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.

``` CSS
// 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gct0bbbmkpj4vugpq6rw.gif)


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

``` Javascript
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5h5uh2ed6a7esevmulw.gif)

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 😀