Responsive Navbar with Search Box in HTML CSS & JS

November 6, 2020

Hello Friends, Today in this post, we’ll learn how to create a Responsive Navbar with Search Box in HTML CSS & JavaScript. recently I have shared an Animated Search bar using HTML and CSS, but our today’s topic is responsive Navbar with Search Box.

As you all know a navigation is a user interface element within a web-page that contains links to other parts of our website. A website navbar is most usually displayed as a horizontal list of links at the top of each page.

Today in this article, I’ll share with you this amazing navbar example. This navbar is totally responsive to any device. On mobile devices, this navbar will adjust their size according to the device height-width. I used CSS Flex and @media property to make this Navbar Fully Responsive.

The search box of this navbar is to create only for design purposes so, when you entered any info in the search bar and click the search button, it won’t show you any results. You may see many websites that have a search box inside the navbar. it provides the best user experience while browsing and searching site content.

If you are a beginner in the designing field you may have tried to build such a navbar. Didn’t get the best result? don’t worry! In this article, you’ll know the basic concept to create a responsive navbar with a search box. this is a pure CSS based navbar project that comes with a search box, dropdown, and hamburger image icon.

The menu items are handled in HTML unordered lists and dropdown are based on nested lists. As you can see in the video, this Navbar is fully Responsive for any devices. If you’re a beginner in Web Designing then this article will help you to understand the basic codes and concepts behind creating the Responsive Navigation and their Search Box.

I hope it will help you a lot, and if you want to get source codes. You can easily get the source codes of this article. To get the source codes you just need to move scroll down. You can use this code on your projects and websites. If you know JavaScript perfectly then you can easily make this search box workable by adding some JS codes.

Play Video

Before giving the codes of this article lets a few talk about the main tags and codes of this program. At first, In the HTML File, I created <nav> tag. As you know, the <nav> tag highly used to create Navbar. Then I created a with the class name “.logo”.After that, I created another with the class name “nav-items” and placed five tags inside it. Inside each tag, I created an anchor tag.

Inside the href attribute of tag, I’ve written # that means when you click on the nav items it won’t redirect you to any page. If you want to redirect your user to a particular page then you can put the URL of the page inside the href. At last, I created <form> and placed <input> tag and <button> tag. Inside <button> I’ve written the class name of the font-awesome search icon name to show Search Icon.

In the CSS File, first I gave a background-color to the navbar then using flex property I placed all elements horizontally. Then I did basic styling to logo and nav-items like I gave color, font-size, padding, etc. Similarly, after that, I did styling to the search box and search icon. Then I again created some tags in HTML File for icons (cancel, menu, search) and hide these icons with giving display: none.

Now, to make this responsive I used CSS @media property. Using this property I’ve changed the elements height-width, margin-padding, size, etc. at particular width. On mobile devices, I moved the logo at the center and placed all nav-items vertically and changed the position of Search Box, and did basic styling to it. In JavaScript, I just created a three-click function for Cancel, Menu, and Search Button. Then I changed the CSS values of the Navigation and Search box on the particular button clicked.

To create this article. First, you need to create two Files one HTML File and another one is CSS File and another JS file. After creating these files just paste these following codes into your file. For any doubts and queries, feel free to leave comments below. Remember to subscribe to our channel. Do share the tutorial if you think it’s worth it.

For any doubts and queries, feel free to leave comments below. Remember to subscribe to our channel. Do share the tutorial if you think it’s worth it

HTML

<!DOCTYPE html>

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Responsive Navbar with Search Box | Code4Education</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <nav> 
      <div class="menu-icon">
        <span class="fas fa-bars"></span>
      </div>

<div class="logo">Code4Education</div>

<div class="nav-items">
        <li><a href="#">Home</a></li>
        <li><a href="#">Service</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </div>

</nav> 
    <script>
      const menuBtn = document.querySelector(".menu-icon span");
      const searchBtn = document.querySelector(".search-icon");
      const cancelBtn = document.querySelector(".cancel-icon");
      const items = document.querySelector(".nav-items");
      const form = document.querySelector("form");
      menuBtn.onclick = ()=>{
        items.classList.add("active");
        menuBtn.classList.add("hide");
        searchBtn.classList.add("hide");
        cancelBtn.classList.add("show");
      }
      cancelBtn.onclick = ()=>{
        items.classList.remove("active");
        menuBtn.classList.remove("hide");
        searchBtn.classList.remove("hide");
        cancelBtn.classList.remove("show");
        form.classList.remove("active"); 
      }
      searchBtn.onclick = ()=>{
        form.classList.add("active");
        searchBtn.classList.add("hide");
        cancelBtn.classList.add("show");
      }
    </script>
  </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}
body{
  background: #f2f2f2;
  background-image: url(images/bg-2.jpg);
  background-size: cover;
  background-position: center;
  min-height: 450px;
  height: 100vh; 
}
nav{
  background: #171c24;
  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{
  display: flex;
  flex: 1;
  padding: 0 0 0 40px;
}
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: #26d63b;
}
nav form{
  display: flex;
  height: 40px;
  padding: 2px;
  background: #1e232b;
  min-width: 18%!important; 
  border: 1px solid rgba(155,155,155,0.2);
  border-radius: 36px;
}
nav form .search-data{
  width: 100%;
  height: 100%;
  padding: 0 10px;
  color: #fff;
  font-size: 17px;
  border: none;
  font-weight: 500;
  background: none;
}
nav form button{
  padding: 0 15px;
  color: #fff;
  font-size: 17px;
  background: #26d63b;
  border: none;
  border-radius: 2px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  cursor: pointer;
  transition: .2s all;
}
nav form button:hover{
  background: #2b9638;
}
nav .menu-icon,
nav .cancel-icon,
nav .search-icon{
  width: 40px;
  text-align: center;
  margin: 0 50px;
  font-size: 18px;
  color: #fff;
  cursor: pointer;
  display: none;
}
nav .menu-icon span,
nav .cancel-icon,
nav .search-icon{
  display: none;
}

@media (max-width: 1245px) {
  nav{
    padding: 0 50px;
  }
}
@media (max-width: 1140px){
  nav{
    padding: 0px;
  }
  nav .logo{
    flex: 2;
    text-align: center;
    font-size:22px;
  }
  nav .nav-items{
    position: fixed;
    z-index: 99;
    top: 70px;
    width: 100%;
    left: -100%;
    height: 100%;
    padding: 10px 50px 0 50px;
    text-align: center;
    background: #14181f;
    display: inline-block;
    transition: left 0.3s ease;
  }
  nav .nav-items.active{
    left: 0px;
  }
  nav .nav-items li{
    line-height: 40px;
    margin: 30px 0;
  }
  nav .nav-items li a{
    font-size: 20px;
  }
  nav form{
    position: absolute;
    top: 80px;
    right: 50px;
    opacity: 0;
    pointer-events: none;
    transition: top 0.3s ease, opacity 0.1s ease;
  }
  nav form.active{
    top: 95px;
    opacity: 1;
    pointer-events: auto;
  }
  nav form:before{
    position: absolute;
    content: "";
    top: -13px;
    right: 0px;
    width: 0;
    height: 0;
    z-index: -1;
    border: 10px solid transparent;
    border-bottom-color: #1e232b;
    margin: -20px 0 0;
  }
  nav form:after{
    position: absolute;
    content: '';
    height: 60px;
    padding: 2px;
    background: #474c55;
    border-radius: 2px;
    min-width: calc(100% + 20px);
    z-index: -2;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  nav .menu-icon{
    display: block;
  }
  nav .search-icon,
  nav .menu-icon span{
    display: block;
  }
  nav .menu-icon span.hide,
  nav .search-icon.hide{
    display: none;
  }
  nav .cancel-icon.show{
    display: block;
    color:#26d63b;
  }
}
@media (max-width: 980px){
  nav .menu-icon,
  nav .cancel-icon,
  nav .search-icon{
    margin: 0 20px;
  }
  nav form{
    right: 30px;
  }
}
@media (max-width: 350px){
  nav .menu-icon,
  nav .cancel-icon,
  nav .search-icon{
    margin: 0 10px;
    font-size: 16px;
  }
}

15 thoughts on “Responsive Navbar with Search Box in HTML CSS & JS”

Kunal says:

January 26, 2021 at 7:29 am

Very nice navbar.I liked it so much.

Can you please make us also a working searchbox on a navbar.

Thankyou for making such beautiful navbar.

Thankyou so,much.

Reply
WWW.XMC.PL says:

January 27, 2021 at 5:57 pm

TY for blogging this, it had been quite handy and helped a ton Great theme, did you make it on your own? Looks superb! Facinating post to check on this awesome blog. Never write any replies but now i just did not resist ..

Reply
https://www.shinsen-mart.com says:

March 22, 2021 at 12:15 pm

Best view i have ever seen !

Reply
https://uchinoshitsuji.com says:

March 28, 2021 at 8:35 pm

Best view i have ever seen !

Reply
https://topphimhot.net says:

September 27, 2021 at 6:11 am

Best view i have ever seen !

Reply
Luther Pinkins says:

November 6, 2021 at 7:16 am

I have created a blog using Blogspot, and I want it to appear on Google Search. Can someone provide me with the steps to do so? . . Much appreciated!.

Reply
best reciprocating saw says:

January 23, 2022 at 10:13 am

Hi there from Texas! I’m bored at work so I decided to check out your site on my free time during lunch break. I love the info you provide here. Anyhow, wonderful post!

Reply
best ceramic heaters says:

January 23, 2022 at 10:15 am

I think you will find there’s problem with your website by using Opera browser.

Reply
best snorkel masks says:

January 23, 2022 at 10:15 am

Youre so cool! I dont suppose Ive read anything in this way just before. So nice to get somebody by original thoughts on this subject. realy appreciation for beginning this up. this website is one thing that is needed online, someone after some originality. helpful project for bringing new stuff towards the web!

Reply
the best laser level says:

January 23, 2022 at 10:21 am

Lady Gaga has revealed she will tour again at the start of very next year because she misses her fans.

Reply
best liquid baby formula says:

January 23, 2022 at 10:22 am

great work… Excellent weblog here! Also your web site a lot up fast! What web host are you the usage of? Can I get your associate link on your host? I want my website loaded up as fast as yours lol…

Reply
zoritoler imol says:

January 23, 2023 at 8:55 am

I like this web site because so much useful material on here : D.

Reply
vorbelutrioperbir says:

March 3, 2023 at 4:09 am

You made some clear points there. I looked on the internet for the topic and found most persons will approve with your site.

Reply
vorbelutrioperbir says:

March 3, 2023 at 4:09 am

I got good info from your blog

Reply
zoritoler imol says:

March 13, 2023 at 12:01 am

You are a very clever individual!

Reply