Hello companions, today in this blog you'll figure out how to make a Fully Responsive Navigation Menu Bar utilizing just HTML and CSS. In the prior blog, I have shared how to make a Responsive Sidebar Menu utilizing HTML and CSS and presently it's an ideal opportunity to make a route bar in HTML. 

As you probably are aware the Menu Bar or Navigation Bar (Navbar) is significant for any sort of site. Numerous sites have a responsive navbar or a responsive navbar with a dropdown menu. Basically, responsive plan is an approach to assemble a site with the goal that it consequently scales its substance and components to coordinate with the screen size on which it is seen. It holds pictures back from being bigger than the screen width and keeps guests from cell phones from expecting to accomplish additional work to peruse your substance. 

In our plan (Responsive Navigation Bar), as you can find in the review picture, there is a flat route bar or navbar with a logo on the left side and some route joins on the right side. This is a straightforward route bar and it is made utilizing just HTML and CSS.


Source Code of Navbar  ðŸ‘‡

HTML File (save as index.html)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <meta charset="utf-8">
  <title>Nav Bar</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
  
  <div class="logo">Codewithharsh</div>
  <div class="nav-items">
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Blogs</a></li>
    <li><a href="">Contact</a></li>
    <li><a href="">Feedback</a></li>
   
  </div>
  
<form action="#" method="post">
  <input type="search" class="search-data" placeholder="Search" required>
  <button value="Submit" class="fas fa-search"></button>
</form>
</nav>
</body>
</html>


CSS File (save as style.css)



   @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
*{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: "Montserrat";
}
body{
  background: #f2f2f2;
}
nav{

  background: linear-gradient(#cc2900, #991f00);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  padding: 0 100px;
}
nav .logo{
color: #fff;
font-size: 30px;
font-weight: 600;
letter-spacing: -1px;
}
nav .nav-items{
  padding: 0 0 0  40px;
  display: flex;
  flex: 1;
}
nav .nav-items li {
  list-style: none;
  padding: 0 15px;
}
nav .nav-items li a {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
}
nav .nav-items li a:hover{
  color: #080808;
}
 nav form{
  display: flex;
  height: 40px;
  padding: 2px;
  background: #1e232b;
  min-width: 18%!important;
  border-radius: 2px;
  border: 1px solid rgba(155, 155, 155, 0.2);
 }

 nav form .search-data{
width: 100%;
height: 100%;
padding: 0 10px;
color: #fff;
font-size: 17px;
border: none;
background: none;
font-weight: 500;
 }

 nav form button {
  padding: 0 15px;
  color: white;
  font-size: 17px;
  background: #ff3d00;
  border: none;
  border-radius: 2px;
  cursor: pointer;
   
}
nav form button:hover{
  background: #e63600;
}