Responsive Navigation Menu Bar using HTML and CSS
Tags: html, css, beginners, webdev
Published: 2021-08-11 16:18:52

In this article I have shared with you how to create a simple Responsive Navigation menu bar. 
We all know the menu bar is a significant part of a website. The navigation menu plays a big role in determining the beauty and quality of the website. Many websites now use sidebar menus, but most websites now use the navigation menu bar.

 I have designed many more [navigation menus using HTML and CSS](https://www.foolishdeveloper.com/2021/08/responsive-navigation-menu-bar.html) code. However, in this case I have used a small amount of JavaScript to execute the menu button. This is a very simple and simple design. If you know the basic HTML and CSS then you can understand the design.

 Below is a YouTube video that lets you watch a demo and get an idea of ​​how it's made.

{% youtube ICyEKNlCAQU %}
 Hopefully the video above has helped you to know how this design is made. Now I am sharing with you how to make it in full step by step below. 

### Step 1: Create the basic structure of navigation

First I designed the basic background of this navigation bar. Originally in the background here I used black color. You can use any other color if you want.

```html
 <nav class="navbar">
 
 </nav>
```

```css
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    html {
        font-family: sans-serif;
    }
    
    li {
        list-style: none;
    }
    
    a {
        text-decoration: none;
    }
 
    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #151617;
        padding: 1rem 1.5rem;
    }
```
![Create the basic structure of navigation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g9z4sbgrsn7gimnkcnlk.jpg)
### Step 2: Add logo to navbar
Now I have used a logo. I have used font-size: 30px and color white of this logo.

```html
<a href="#" class="nav-logo">Mystery Code</a>
```


```css
    .nav-logo {
        font-size: 30px;
        font-weight: 500;
        color: white;
    }
```
![Add logo to navbar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nwugrc9dbatu7mvy0n1m.jpg)
### Step 3: Add menu links
Now I have added the necessary menu items here. Here I have basically added five menu items you can increase the amount if you want. `Margin-left: 3rem` has been used to keep each menu a bit away from each other.

Here I have used the front size of the menu links 19 px and the color white. If you want to increase the size of these links a little, you can increase the size of the front here.

```html
<ul class="nav-menu">
 <li class="nav-item">
   <a href="#" class="nav-link">Home</a>
 </li>

 <li class="nav-item">
   <a href="#" class="nav-link">Services</a>
 </li>

 <li class="nav-item">
   <a href="#" class="nav-link">Portfolio</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>
```


```css
    .nav-menu {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .nav-item {
        margin-left: 3rem;
    }
    
    .nav-link{
        font-size: 19px;
    
        color: white;
    }
    
    .nav-link:hover{
        color: #1ae5f7;
    }
```
![Add menu links](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bhl1xqhm45tiuphgcf5d.jpg)
### Step 4: Create menu button
 Above we have designed the Basic menu bar, now I will make it for Responsive Devices. First of all here I will create a menu button. Basically, in the case of responsive devices, menu items are completely hidden, instead we see a menu button.

 When we click on that menu button, we can see the complete menu items. I made this button by three lines. Which is built using the following HTML and CSS codes. I used `width: 25px`, `height: 3px` and background-color: white of each line. The lines are 5 pixels apart.
```html
<div class="hamburger">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
</div>
```


```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: white;
    }
```
### Step 5: Make the menu bar responsive with css
 Now I will make it for Responsive Devices. In this case, I did not use any bootstrap or CSS library. I made it responsive using only css.
```css
@media only screen and (max-width: 668px) {
        .nav-menu {
            position: fixed;
            left: -100%;
            top: 5rem;
            flex-direction: column;
            background-color: #3d3d3d;
            width: 100%;
            padding-top: 20px;
            padding-bottom: 20px;
            text-align: center;
            transition: 0.3s;
    
        }
    
        .nav-menu.active {
            left: 0;
        }
    
        .nav-item {
            margin: 2.5rem 0;
    
        }
    
```
![Make the menu bar responsive with css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5b9bl8b62zwcoh84fzcn.jpg)
### Step 6: Determine what happens when you click on the menu button
 The following CSS codes have been used to add animation effects to the menu button. When you click on that menu button, those three lines will join together to form a cross symbol. 

In this case, the lines number one and number three move at an `angle of 45 degrees` to each other and the line number two is not visible. This results in the number one and three lines being joined together to form a `cross mark`.
```css
       .hamburger {
            display: block;
            cursor: pointer;
        }
    
        .hamburger.active .bar:nth-child(2) {
            opacity: 0;
        }
    
        .hamburger.active .bar:nth-child(1) {
            -webkit-transform: translateY(8px) rotate(45deg);
            transform: translateY(8px) rotate(45deg);
        }
    
        .hamburger.active .bar:nth-child(3) {
            -webkit-transform: translateY(-8px) rotate(-45deg);
            transform: translateY(-8px) rotate(-45deg);
        }
 

```


### Step 7: Activate the menu button using JavaScript
 Now I have activated these buttons using JavaScript code. First I set the constants to one of three class functions. Here '.hamburger', '.nav-menu', '.nav-link' have hamburger, navMenu, navLink constants respectively.
```javascript
const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
const navLink = document.querySelectorAll(".nav-link");
```
 Then using the JavaScript below I activated those two menu buttons.
```javascript
hamburger.addEventListener("click", mobileMenu);
navLink.forEach(n => n.addEventListener("click", closeMenu));

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

function closeMenu() {
    hamburger.classList.remove("active");
    navMenu.classList.remove("active");
}
```
![Activate the menu button using JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z7tqlf7xeglso1if4gyf.jpg)

 Hope you know the basic JavaScript and understand the JavaScript structure above. If you have trouble understanding, you can watch the video tutorial above. 

Hopefully in this article I have explained how to extend the menu bar on a simple navigation using HTML CSS and JavaScript code. You can download the required source code.