Responsive Navigation Menu bar using HTML & CSS

In this article, I am going to show you how to create a responsive navigation menu bar using HTML, CSS, and javascript. I have designed many types of navigation and side menubars before. However, this design is much simpler and simpler. If you are a beginner and want to know about the concept of a navigation menu bar then this tutorial will definitely help you.

 This is a fully responsive CSS navigation menu bar. Bootstrap or other external links were not used to make Responsive. It has been made Responsive using Pure CSS Code. In this case, I have used a small amount of JavaScript only to execute the menu button.

 First I designed the background for navigation and in this case, I used black color in the background. First of all, I used a logo here. In this case, I have used text to create a logo. However, you can use separate images. 

Then I used five menu items here. I have used the color white for menu items and logos which can be seen very clearly on a black background.

Responsive Navigation Menu bar

It is a fully responsive device so it can adapt itself beautifully to any device. In the case of responsive devices, menu items are completely hidden, instead, a small menu button is seen. 

If you click on that button, you can see the complete menu items. It is a very simple design that you can create if you know the basic HTML CSS.

 I have given the demo section below to see the live demo of how it works. From it, you can feel its live demo. Here you will find the required source code which you can copy and use for any purpose. I have also given the download link at the bottom of the article which will help you to download these codes.

See the Pen by Foolish Developer (@fghty) on CodePen.

Hopefully, the demo has helped you to know clearly how it works. Now is the time to learn step by step how I made the Navigation Menu bar.

Responsive Navigation Menu bar using HTML & CSS

Below I have added some basic CSS code first of all. These are basically used to design your webpage.

    * {

        margin: 0;

        padding: 0;

        box-sizing: border-box;

    }

    

    html {

        font-size: 62.5%;

        font-family: sans-serif;

    }

    

    li {

        list-style: none;

    }

    

    a {

        text-decoration: none;

    }

   

 

Step 1: Create the basic structure of the navbar

First of all, I will create a basic structure in the menu bar. For this below I have used HTML and CSS code. I used black as the background color of this navbar. 

If you want to use another color, you can add the color of your choice in place of this background color.

 <nav class="navbar">

 </nav>

    .navbar {

        display: flex;

        justify-content: space-between;

        align-items: center;

        background-color: #151617;

        padding: 1rem 1.5rem;

    }

Step 2: Create a logo

I made a small logo, in this case, I did not use any image, I made this logo using text. I have font-size: 30px and color: white of the logo.

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

    .nav-logo {

        font-size: 30px;

        font-weight: 500;

        color: white;

    }

Step 3: Add navigation menu items  

Now I have added all the necessary menu items. In this case, I basically added five menu items. However, you can increase or decrease the amount of your choice. 

Margin-left: 3rem has been used to keep menu items a bit away from each other. Used font-size: 19px and color white for each item. Howie's color has been given on it. The color will change when you click on these items.

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

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

    }

Step 4: Create menu buttons for responsive devices

Now I will create a menu button for Responsive Devices. As I said before, in the case of responsive devices, these menu items are completely hidden. A menu button is available instead. I have used the following CSS and HTML codes to create that button.

 <div class="hamburger">

    <span class="bar"></span>

    <span class="bar"></span>

    <span class="bar"></span>

 </div>

    .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 using CSS code

Now I will design this menu bar for Responsive Devices. Basically, @media has been used in this case, and max-width: 668px. The following codes will be applied to devices with a screen size below 668px.

    @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;

    

        }

Step 6: Add animation with the menu button

 I animated this menu button. When you click on that menu button, the hidden menu items will appear. Basically, this button is made up of three lines. 

When you click on this button, the first line will be at a 45-degree angle with the third line and the second line will not be visible. This will place the first and second lines in the shape of a cross.

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

Now I have used a small amount of JavaScript code to execute this menu button. First I defined one of the three-class function variables.

const hamburger = document.querySelector(".hamburger");

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

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

 I have executed the animation in the menu button using the JavaScript code below. I have also activated the menu button and the cancel button. After using it, when you click on the menu button, all the menus will appear and when you click again, all the menus will be hidden.

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");

}

 Hope you learned from this tutorial how I created this Responsive Navigation menu bar using HTML CSS and JavaScript code. I have already shared with you many more types of navigation menu designs that you can see if you want. 

If you want to know more, you can watch the video tutorial above. I have given the download button below for the required source code. You can download the source code required to create a menu bar on this CSS by clicking on that button.

The download will start automatically