Responsive Navigation Menu Bar Design using only HTML & CSS

Hello readers, Today in this blog you'll learn how to create a Responsive Navigation Menu using only HTML & CSS. Earlier I've shared a blog on how to create a Responsive Chatbox Widget. In this blog, I'm going to create a Responsive Navbar that is based on pure CSS.

You may have seen the Navigation Bar on many websites. Generally, A navigation bar is a user interface (UI) element within a webpage that includes links to other sections of the website. The navigation bar is the essential UI element of a website's design.

In this program (Responsive Navigation Menu Bar Design), there is a navbar on the top of the webpage and in this navbar, there is a logo on the left side and some navigation links on the right side of the navbar. On the PC, these navigation links are aligned in a horizontal line but on mobile devices, these links are aligned vertically. This is a pure CSS program and I didn't use JavaScript or any JavaScript library to create this Navigation Bar.

I used CSS @media property to make this navbar responsive for any devices - mobile, tab, and pc. You can watch a full video tutorial on this program (Responsive Navbar Design).

Video Tutorial of Responsive Navigation Menu Bar Design

In the video, you have seen the Responsive Navbar and I hope you have understood the basic codes behind creating this Navbar. As you have seen, on the mobile devices these navigation links are aligned vertically and there is also shown a menu button that toggles the Navbar to hide or show. To make this icon as a toggle button, I used HTML <input type="checkbox'> and control this checkbox with label tag.

If you like this program (Responsive Navigation Menu Bar or Navbar) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use this navbar in your HTML pages, websites, and projects.

Responsive Navigation Menu Bar [Source Codes]

To create this program (Responsive Navigation Menu Bar or Navbar). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. You can also download the source code files through the given link. Click here to download source code files.

HTML FILE:

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- Somehow I got an error, so I comment the title, just uncomment to show -->
    <!-- <title>Responsive Navigation Menu</title> -->
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <nav>
      <div class="logo">
Brand</div>
<input type="checkbox" id="click">
      <label for="click" class="menu-btn">
        <i class="fas fa-bars"></i>
      </label>
      <ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</nav>
    <div class="content">
      <div>
Responsive Navigation Menu Bar Design</div>
<div>
using only HTML & CSS</div>
</div>
</body>
</html>

CSS FILE:

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
} 
nav{
  display: flex;
  height: 80px;
  width: 100%;
  background: #1b1b1b;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px 0 100px;
  flex-wrap: wrap;
}
nav .logo{
  color: #fff;
  font-size: 35px;
  font-weight: 600;
}
nav ul{
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
nav ul li{
  margin: 0 5px;
}
nav ul li a{
  color: #f2f2f2;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: 5px;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover{
  color: #111;
  background: #fff;
}
nav .menu-btn i{
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: none;
}
input[type="checkbox"]{
  display: none;
}
@media (max-width: 1000px){
  nav{
    padding: 0 40px 0 50px;
  }
}
@media (max-width: 920px) {
  nav .menu-btn i{
    display: block;
  }
  #click:checked ~ .menu-btn i:before{
    content: "\f00d";
  }
  nav ul{
    position: fixed;
    top: 80px;
    left: -100%;
    background: #111;
    height: 100vh;
    width: 100%;
    text-align: center;
    display: block;
    transition: all 0.3s ease;
  }
  #click:checked ~ ul{
    left: 0;
  }
  nav ul li{
    width: 100%;
    margin: 40px 0;
  }
  nav ul li a{
    width: 100%;
    margin-left: -100%;
    display: block;
    font-size: 20px;
    transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  #click:checked ~ ul li a{
    margin-left: 0px;
  }
  nav ul li a.active,
  nav ul li a:hover{
    background: none;
    color: cyan;
  }
}
.content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: -1;
  width: 100%;
  padding: 0 30px;
  color: #1b1b1b;
}
.content div{
  font-size: 40px;
  font-weight: 700;
}

Thanks for visiting, Keep visiting.

27 Comments

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

pavan padghanAugust 23, 2020 at 4:48 PM
nice bro
UnknownAugust 23, 2020 at 10:01 PM
bro its not working properly it can shows search option in both desktop and mobile view.Also there is not navbar in mobile view
Bhadresh TandelAugust 31, 2020 at 11:36 AM
amazing bro...
UnknownSeptember 5, 2020 at 5:52 PM
hey bro what about copyright can i use everything i see in this tutorial?
UnknownSeptember 20, 2020 at 8:40 PM
On my website, whenever I scale it to the Iphone x size, there is a small space between the navbar and the menu. How do I fix this?
¿Quiénes eran los amerindios?September 25, 2020 at 4:57 AM
Thank you bro, I love you xD
Irfan.sSeptember 26, 2020 at 1:27 PM
thank you so much sir
UnknownOctober 21, 2020 at 2:18 PM
bro can i use the code in my blog
UnknownNovember 19, 2020 at 12:44 PM
bro you said no js but script src="https://kit.fontawesome.com/a076d05399.js"></script

if i didn't connect to the internet the nav bar is not showing
UnknownNovember 22, 2020 at 12:19 PM
Nice work bro. I copied the codes and made two changes only:

1. Instead of "Brand" i wrote my work name
2. Changed the names of the list items

But, when i shrink the browser window, I do not get the menu button (which shows up as the 3 lines in the top right corner). I am using Google Chrome to view this. Any idea what can be wrong?
EntertainmentNovember 23, 2020 at 12:59 AM
hello
UnknownNovember 25, 2020 at 11:46 AM
When I squeeze the chrome window, the menu lines (3 lines i the top right corner) do not appear. Any ideas why?
UnknownJanuary 18, 2021 at 11:18 AM
Amazing good job!! I hope you will tutorial to build a complete website using html css and js. Love from Vietnam
Great Unique blogFebruary 2, 2021 at 7:09 PM
Thank you sir for this helpful code
UnknownMarch 12, 2021 at 2:03 PM
I have converted this code to angular

but its not comming as same
UnknownMarch 19, 2021 at 3:48 PM
Good Day
Am Muhsin a ICT student
i just copied your code up here about and i try to run it but it is not working i have try try but i could not find the problem
am learning Navigation Using HTML CSS and JS
if you could help it is going to be helpful to me
here is my Gmail Muhsinmusa240@gmail.com

Video Tutorial of Responsive Navigation Menu Bar Design

You might like this:

Responsive Navigation Menu Bar [Source Codes]

Thanks for visiting, Keep visiting.

27 Comments

Post a Comment

About Us

Contact Form