Responsive Navigation Menu Bar in HTML CSS

Hey friends, today in this blog you'll learn how to create a Fully Responsive Navigation Menu Bar using only HTML & CSS. In the earlier blog, I have shared how to create a Responsive Sidebar Menu using HTML & CSS and now it's time to create a navigation bar in html.

As you know the Menu Bar or Navigation Bar (Navbar) is important for any kind of website. Many websites have a responsive navbar or a responsive navbar with a dropdown menu. Essentially, responsive design is a way to put together a website so that it automatically scales its content and elements to match the screen size on which it is viewed. It keeps images from being larger than the screen width and prevents visitors from mobile devices from needing to do extra work to read your content.

In our design (Responsive Navigation Bar), as you can see in the preview image, there is a horizontal navigation bar or navbar with a logo on the left side and some navigation links on the right side. This is a very simple navigation bar and it is created using only HTML & CSS. The best part about this navigation bar is, it is fully responsive for any kind of device including mobile phones. On the pc, this navigation bar displayed in a horizontal line but on mobile devices, this navbar or navigation bar displayed in a vertical line. On the mobile, you have the option to show or hide the menu bar by clicking on the hamburger menu icon.

The concept behind shows or hide menu bar on menu icon click is simple. I used HTML <input> and <label> tag to show or hide menu bar. When the checkbox is checked and the menu bar is shown and when the checkbox is unchecked menu bar hidden. If you're feeling difficulty understanding what I am saying. You can watch a full video tutorial on this navigation bar in HTML.

Video tutorial of Responsive Navigation Bar in HTML

In the video tutorial, you have seen this is a pure CSS responsive navigation bar and I've used CSS @media property to make this navigation bar fully responsive for mobile devices. If you like this responsive navigation bar and want to get source codes of this program then you can easily copy the codes of this tutorial from the given copy boxes or you can also download the code files of this navigation menu bar.

If you're a beginner and you know a little bit of HTML & CSS then the codes and concept of this navigation bar will definitely help you to understand HTML & CSS more. This is a very simple responsive navigation bar with few and clean codes.

Responsive Navigation Bar [Source Codes]

Before sharing the source codes of this responsive navbar. Let's a few talks about the main tags and codes of this design. To create this responsive navbar I had used HTML & CSS only which means this is a pure CSS program. As you already know, this program is <ul> and <li> based design, that’s why we can create a menu or navigation links easily. I've used <input type="checkbox"> and <label for=""> tag to toggle menu bar in HTML for the mobile version. I also used the Fontawesome for a hamburger icon.

There are many things I left. Because I can't say all things in writing. I'm just talking about the main codes of this menu bar but don't worry you'll understand all the codes and concepts after getting the source code of this responsive navbar. To create this responsive navigation bar. 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 into your file. You can also download the source code files of this dropdown menu CSS design from the below download button.

HTML CODE:

<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- <title>Responsive Navbar | CodingNepal</title> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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"/>
  </head>
  <body>
    <nav>
      <input type="checkbox" id="check">
      <label for="check" class="checkbtn">
        <i class="fas fa-bars"></i>
      </label>
      <label class="logo">DesignX</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="#">Contact</a></li>
        <li><a href="#">Feedback</a></li>
      </ul>
    </nav>
    <section></section>
  </body>
</html>

CSS CODE:

*{
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}
body{
  font-family: montserrat;
}
nav{
  background: #0082e6;
  height: 80px;
  width: 100%;
}
label.logo{
  color: white;
  font-size: 35px;
  line-height: 80px;
  padding: 0 100px;
  font-weight: bold;
}
nav ul{
  float: right;
  margin-right: 20px;
}
nav ul li{
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}
nav ul li a{
  color: white;
  font-size: 17px;
  padding: 7px 13px;
  border-radius: 3px;
  text-transform: uppercase;
}
a.active,a:hover{
  background: #1b9bff;
  transition: .5s;
}
.checkbtn{
  font-size: 30px;
  color: white;
  float: right;
  line-height: 80px;
  margin-right: 40px;
  cursor: pointer;
  display: none;
}
#check{
  display: none;
}
@media (max-width: 952px){
  label.logo{
    font-size: 30px;
    padding-left: 50px;
  }
  nav ul li a{
    font-size: 16px;
  }
}
@media (max-width: 858px){
  .checkbtn{
    display: block;
  }
  ul{
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #2c3e50;
    top: 80px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }
  nav ul li{
    display: block;
    margin: 50px 0;
    line-height: 30px;
  }
  nav ul li a{
    font-size: 20px;
  }
  a:hover,a.active{
    background: none;
    color: #0082e6;
  }
  #check:checked ~ ul{
    left: 0;
  }
}
section{
  background: url(bg1.jpg) no-repeat;
  background-size: cover;
  height: calc(100vh - 80px);
}

Download code files

69 Comments

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

GermanApril 26, 2020 at 11:01 PM
Great, thanks broh
ReplyDelete
Replies
AMIT SINGH CHHONKERApril 28, 2020 at 9:34 AM
bahut accha bro ....im your fan....bro your genuine person who post each and everything.....:) love from india
ReplyDelete
Replies
AMIT SINGH CHHONKERApril 28, 2020 at 9:56 AM
bro why you have used fontaawesome icon because its decreasing the speed of website ....i want to ask can we use a icon instead of script icon ?
ReplyDelete
Replies
AMIT SINGH CHHONKERApril 28, 2020 at 5:58 PM
yaa aapne sahi bola download hojayega.....but bro mere pass computer mai already .png icon wali file padi hai aur jab mai upload kar raha hoon aapke code mai script ko remove kar k vo show nahi ho rahi h idk why ?
ReplyDelete
Replies
EasyTutsApril 28, 2020 at 6:37 PM
Thank you for providing code bro.
ReplyDelete
Replies
AnonymousApril 29, 2020 at 3:25 AM
Great video but can you help me if i want to change the background photo because when i go to the section and change the name of your photo to mine it doesnt work and show it white blank page . Any idea ?
Thank You!
ReplyDelete
Replies
AnonymousApril 30, 2020 at 4:11 AM
How can you make the list item stay a different color after clicking on it?
In your example, the Home button is always a different color. How can you have that change with which item is clicked on?
ReplyDelete
Replies
Ravi kumarMay 5, 2020 at 11:36 AM
I want to ask what is this coding mean i class="fas fa-bars" /i>. Can you please help me
ReplyDelete
Replies
AnonymousMay 5, 2020 at 9:09 PM
hello, i copied and pasted this to try it out but only the html worked, the css didnt work, also happened when i copied from somewhere as well didnt work, again only the ntml ran, what am i doing wrong ?
ReplyDelete
Replies
NadimJune 1, 2020 at 8:14 PM
Hello,
Thanks a lot for above tutorials.
I need to ask i tried to fixed position of navigation bar but it is not working.
Can you suggest me .I used almost same of your code and designed different color and effects .
ReplyDelete
Replies
UnknownJune 5, 2020 at 1:31 AM
Muito muito muito obrigado pelos tutoriais !!!
Voçê tem sido " inspirador " !!!!
ReplyDelete
Replies
AnonymousJune 10, 2020 at 3:06 PM
Thanks alot
ReplyDelete
Replies
UnknownJune 12, 2020 at 9:07 PM
gggggggg
ReplyDelete
Replies
AnonymousJune 24, 2020 at 10:55 PM
Hey Man. Excelent job! Thank you for sharing! I really appreciate it.
keep up the good work
ReplyDelete
Replies
UnknownJune 29, 2020 at 1:31 AM
Hi thanks for the good work. I do appreciate.
How can I stop scrolling on the page when the nav bar is open in mobile view
ReplyDelete
Replies
DesireSoft4uJune 29, 2020 at 12:50 PM
Given codes is not working in my blogger website,why?,please hepl me Bro!
ReplyDelete
Replies
UnknownJuly 2, 2020 at 11:59 AM
You are great codingnepal
ReplyDelete
Replies
VishwanathJuly 3, 2020 at 10:11 PM
It works really nice bro but when i am scrolling in sidebar the background page is scrolling bro and as the top bar(blue) is not sticky the bar goes up and we can clearly see the back page scrolling. can you please help me with how to lock scroll while in sidebar
ReplyDelete
Replies
Abu jahedJuly 5, 2020 at 4:00 PM
Thank you for sharing..I really appreciate it.
keep up the good work
ReplyDelete
Replies
UnknownJuly 8, 2020 at 8:01 PM
Thank you for this tuto,

I saw on youtube you mentioned java script to close the nav bar when clicking a link. Could you please tell me how to do it I am really struggling ?
Thank you for your help
ReplyDelete
Replies
saquib hussainJuly 11, 2020 at 11:06 PM
great work, looking for many more projects from you
ReplyDelete
Replies
sparsha bhusalJuly 20, 2020 at 8:26 PM
When I preview on atom it works but on browser it doesn't work.
Sir could I get your contact for explaining it briefly by sending recording and screenshots.
ReplyDelete
Replies
UnknownJuly 21, 2020 at 4:35 PM
I see the code in your website(2 window frame) doesn't work responsively but the code in your download link works well. It could be grateful if you checked that, it will be helpful for other beginners.Thanks for your high quality information, just see your video in youtube.
ReplyDelete
Replies
UnknownJuly 21, 2020 at 6:38 PM
I see the code in your website(2 window frame) doesn't work responsively but the code in your download link works well. It could be grateful if you checked that, it will be helpful for other beginners.Thanks for your high quality information, just see your video in youtube.
ReplyDelete
Replies
BloggancerAugust 4, 2020 at 11:57 PM
This comment has been removed by a blog administrator.
ReplyDelete
Replies
Yousaf NadeemAugust 5, 2020 at 2:15 PM
What if I want to attach a image as a logo. How can I do that?
ReplyDelete
Replies
BercanAydınSeptember 17, 2020 at 1:36 PM
I want this header sticky. How can i do it?
ReplyDelete
Replies
AngelicaNovember 12, 2020 at 8:01 PM
Hello. Thank you for sharing your code! See.. Everytime I refresh the page in a smaller width, the menu starts open. How can I fix that?
ReplyDelete
Replies
dhruv sutharDecember 4, 2020 at 2:47 PM
sir you help me in become a html developer my name is dhruv
ReplyDelete
Replies
UnknownDecember 14, 2020 at 2:10 PM
Thank you man,but could you make a video or reply a script here please so that the responsive navbar also hides on scroll.It would be a perfect video!
ReplyDelete
Replies
UnknownDecember 16, 2020 at 6:01 PM
hello bro! I m new follower here ,impressed from your youtube channel so i came here,,
I m bit confused about you have used input tags and label just after the nav tags what is that for ,plz expain this point to me....Thanks
ReplyDelete
Replies
Tushar DeshmukhJanuary 29, 2021 at 12:10 PM
Bro cam i get ypur website theme
ReplyDelete
Replies
SalMarch 12, 2021 at 5:43 PM
Hi, when you press the button, the menu comes from the left. How do I change it so that it's coming from the right or the top (going down)?
ReplyDelete
Replies
UnknownMarch 23, 2021 at 5:19 AM
I have this error GET https://kit.fontawesome.com/a076d05399.js net :: ERR_ABORTED 403 help
ReplyDelete
Replies
NestaMarch 24, 2021 at 3:42 PM
Hello,

I am an amatuer. I tried several times to modify the menu, but not successdful. I hope you can rewrite some of the code. The are two requirememnts.
1. The hamburger changes to "cross" when it is pressed.
2. The menu slide from buttom to top.
Thanks
ReplyDelete
Replies
TechMilitianApril 13, 2021 at 6:47 PM
which software did you use ?
ReplyDelete
Replies
TechMilitianApril 13, 2021 at 6:48 PM
which software did you use for html and css
ReplyDelete
Replies
AnonymousApril 17, 2021 at 7:03 AM
man you are just awesome <3
ReplyDelete
Replies

Add comment

Video tutorial of Responsive Navigation Bar in HTML

You might like this:

Responsive Navigation Bar [Source Codes]

69 Comments

Post a Comment

About Us

Contact Form