How to create a simple mobile responsive navigation bar with HTML, CSS and JavaScript
Tags: beginners, tutorial, css, html
Published: 2023-10-26 13:03:01

Navigation bars are essential components used a lot in websites and web apps. As a software developer, you will need to be able to create and customize them, either for yourself or for a client project.

In this article, you'll learn how to create a simple mobile responsive navigation bar with HTML, CSS, and JavaScript. This article assumes that you have basic knowledge of HTML, CSS, and JavaScript.

Let's get right into it.

## Step 1 - Add HTML Markup
Before adding the HTML markup for our navigation bar, let's import a hamburger icon from Google icons. we'll be using the hamburger icon to toggle the navigation menu in small screens.

To import and use the hamburger icon from google, add the snippet below in the head of your HTML file:
```
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
```

Next, add the markup below to your HTML file. I will explain it later.
```
<header class="header">
        <div class="nav-container">
            <span class="logo">NavBar</span>
            <nav class="nav">
                <ul class="nav--ul__one">
                    <li class="nav-link"><a href="#">Home</a></li>
                    <li class="nav-link"><a href="#">Contact</a></li>
                    <li class="nav-link"><a href="#">About Us</a></li>
                </ul>
                <ul class="nav--ul__two">
                    <li class="nav-link"><a href="#">Login</a></li>
                    <li class="nav-link"><a href="#">Signup</a></li>
                </ul>
            </nav>
            <span class="hamburger-menu  material-symbols-outlined">menu</span>
        </div>
</header>
```
The HTML markup consists of the following:

1. A `<header>` element with the class of `header` that wraps the all the elements.
2. Inside the `header`, you have a container `div` with the class `nav-container`. This `div` wraps the `logo`, navigation links, and the hamburger menu.
3. A `<span>` element with the class `logo`.
4. A `<nav>` element with the class `nav` as the main navigation container. This container holds the navigation links and hamburger menu icon.
5. Inside the `<nav>`, you have two list of navigation links each represented with a `<ul>` with the class of `nav--ul__one` and `nav--ul__two` respectively.
6. You have another `<span>` element with the class `hamburger-menu` and an icon class `material-symbols-outlined` which represents the hamburger menu icon.

Here is the result:

![markup result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y2bp0pm0l3139ow61dyo.png)

With that done, now let's add some styles to make our navigation bar visually appealing.

## Step 2 - Style the Navigation Bar
We'll start by resetting the default padding and margin of every element of the page, and add some basic styling to a few elements.

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

body {
    font-family: Arial, Helvetica, sans-serif;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}
```
Now that we are done with some basic styling, let's focus on styling the core navigation bar itself.

### Navigation Menu Styles
Here is the markup to style the navigation:

```
header {
    background: #4D4DDB;
    color: white;

    padding: .5rem 0;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 90%;
    margin: 0 auto;
}


.nav-container .logo {
    font-size: 2rem; 
    font-weight: bold;  
}

.nav {
    display: flex;
    flex-grow: 1;
}

.nav--ul__one {
    margin: 0 auto;
}

.nav-container, .nav--ul__one,
.nav--ul__two {
    display: flex;
    gap: 1.6rem;
    font-size: 1.2rem;
}

.hamburger-menu {
    display: none; /* Hidden by default for larger screens */
    cursor: pointer;
}

```
Our navigation bar would look like this: 

![navigation bar styles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lfmyuk4p35hksltxwlf3.png)

Next, let's add some media query to make our navigation bar mobile responsive.

```
@media (max-width: 700px) {
    .nav-container .logo {
        font-size: 1.2rem;
        z-index: 2;
    }

    .nav {
        flex-direction: column;
        gap: 2rem;
    }

    .nav--ul__one,
    .nav--ul__two {
        flex-direction: column;
        gap: .6rem;
    }

    .hamburger-menu {
        display: block;

        z-index: 2;
    }

    .nav {
        position: absolute;
        top: 0;
        right: -100%;
        bottom: 0;
        width: 100%;
        
        padding-top: 6rem;

        align-items: center;
        text-align: center;
        background-color: #4D4DDB;
        color: white;

        transition: 0.15s ease-in-out;
    }

    .nav.active {
        right: 0;
    }
    
}
```
First, this arranges the elements on small screens, and most importantly, making the `nav` slide in from the right when active but of course, it is not functional. we'll do that next. 

Here is the result so far:

![navigation bar responsiveness on small screens](https://i.imgur.com/amlDL2H.gif)


Now, let's work on the functionality in the next section.

## Step 3 - Add JavaScript Functionality
Here are the steps we'll use to add javascript functionality to the navigation bar:
1. Get references to the `hamburger-menu` and `nav`
2. Add a click event listener to the `hamburger-menu`
3. Toggle the `active` class on the `nav` to show/hide it

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

hamburgerMenu.addEventListener("click", () => {
    nav.classList.toggle("active")
});
```
When the `hamburger-menu` is clicked, it toggles the visibility of the menu by adding or removing the `active` class.

Final result:
![Navigation bar mobile view](https://i.imgur.com/MRJkTu7.gif)

And with this, you’ve successfully built a mobile responsive navigation bar using just HTML, CSS, and JavaScript.

## Conclusion
I sincerely hope you found this post interesting or useful. If you did, kindly react to it and share with your friends or follow my account so you won't miss any future postings. Thanks for reading.