Responsive navigation menu bar using HTML & CSS

What's up guys in this article we will learn about how you can create and fully responsive navigation menu bar using HTML and css. Navigation menubar is important for a website. The menu bar helps anyone to get quick link and shortcuts of a webpage.

Nowadays 70% website has the mega menu on the header so I'm decided to create one by myself for my visitor.

As you can see in the image, This is a simple and fully Responsive Navbar Bar, not a stylish or not a fancy one. This is a pure CSS-based Responsive Navigation Bar where HTML <input type="checkbox"> tag is used to toggle the menu bar that means when you click on that three-line bars.

The checkbox will be checked and the menu bar has appeared and when you again click on those bars, the checkbox will be unchecked and that demonstrated menu bar will be covered up. This cycle is just done by HTML <input type="checkbox"> tag and <label> tag.

In case you're feeling trouble comprehending what I am stating. You can watch a full video instructional exercise on this program (Responsive Navigation Menu Bar).

Demo Project

*{
  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.logox{
  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.activex,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.logox{
    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.activex{
    background: none;
    color: #0082e6;
  }
  #check:checked ~ ul{
    left: 0;
  }
}
section{
  background: url(pexels-photo-4245826.jpg) no-repeat;
  background-size: cover;
  height: calc(100vh - 80px);
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <title>Home</title>
    <meta charset="utf-8">
    <!-- Somehow I got an error, so I comment the title, just uncomment to show -->
    <!-- <title>Responsive Navbar</title> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <nav>
      <input type="checkbox" id="check">
      <label for="check" class="checkbtn">
        <i class="fas fa-bars"></i>
      </label>
      <label class="logox">Logo</label>
      <ul>
        <li><a class="activex" 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>

Project Background

Download Project

Conclosing

In this tutorial, I will give you a responsive menubar project file. If you face any problem with this tutorial please on down below. Thanks for with us.