Navbar with Search Box – CodingNepal https://www.codingnepalweb.com CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP. Fri, 04 Jun 2021 14:40:01 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Responsive Navbar with Search Box using HTML CSS & JavaScript https://www.codingnepalweb.com/responsive-navbar-with-search-box/ https://www.codingnepalweb.com/responsive-navbar-with-search-box/#comments Fri, 19 Jun 2020 12:44:00 +0000 https://codingnepalweb.com/2020/06/19/responsive-navbar-with-search-box-using-html-css-javascript/ Responsive Navbar with Search Box using HTML CSS & JavaScript

Hello readers, Today in this blog, you’ll learn how to create a Fully Responsive Navbar with Search using HTML CSS & JavaScript. Earlier I have shared many blogs about Responsive Navigation Bar and Responsive Sidebar Menu but still, I have not shared any blog on Responsive Navbar with Search Box. So now, it’s time to create a Responsive Navbar with a Search Box.

A navigation bar is a user interface element within a webpage that contains links to other parts of the website. A website navigation bar is most usually displayed as a horizontal list of links at the top of each page.

Today in this blog, I’ll share with you this program (Responsive Navbar with Search Box). This navbar is fully responsive to any device. On mobile devices, this navbar will adjust its height-width automatically according to the device’s 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 on the search button, it won’t show you any results.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Responsive Navbar with Search Box).

Video Tutorial of Responsive Navbar with Search Box

 
As you have seen in the video, this Navbar is fully Responsive for any device. If you’re a beginner in Web Designing then this tutorial helped you to understood the basic codes and concepts behind creating the Responsive Navbar and their Search Box.

If you like this program (Responsive Navbar with Search Box) 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 program on your projects and websites. If you know JavaScript perfectly then you can easily make this search box workable by adding some JavaScript codes.

You might like this:

Responsive Navbar with Search Box [Source Codes]

To create this program (Responsive Navbar with Search Box). 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. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Responsive Navbar with Search Box | CodingNepal</title>
      <link rel="stylesheet" href="style.css">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
   </head>
   <body>
      <nav>
         <div class="menu-icon">
            <span class="fas fa-bars"></span>
         </div>
         <div class="logo">
            CodingNepal
         </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>
         <div class="search-icon">
            <span class="fas fa-search"></span>
         </div>
         <div class="cancel-icon">
            <span class="fas fa-times"></span>
         </div>
         <form action="#">
            <input type="search" class="search-data" placeholder="Search" required>
            <button type="submit" class="fas fa-search"></button>
         </form>
      </nav>
      <div class="content">
         <header class="space">Responsive Navbar with Search Box</header>
         <div class="space text">
            using HTML CSS & JavaScript
         </div>
      </div>
      <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");
           cancelBtn.style.color = "#ff3d00";
         }
         searchBtn.onclick = ()=>{
           form.classList.add("active");
           searchBtn.classList.add("hide");
           cancelBtn.classList.add("show");
         }
      </script>
   </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@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;
}
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: #ff3d00;
}
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;
  font-weight: 500;
  background: none;
}
nav form button{
  padding: 0 15px;
  color: #fff;
  font-size: 17px;
  background: #ff3d00;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}
nav form button:hover{
  background: #e63600;
}
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;
  }
  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: #1e232b;
    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;
  }
}
.content{
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}
.content header{
  font-size: 30px;
  font-weight: 700;
}
.content .text{
  font-size: 30px;
  font-weight: 700;
}
.space{
  margin: 10px 0;
}
nav .logo.space{
  color: red;
  padding: 0 5px 0 0;
}
@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;
  }
}
.content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.content header{
  font-size: 30px;
  font-weight: 700;
}
.content .text{
  font-size: 30px;
  font-weight: 700;
}
.content .space{
  margin: 10px 0;
}

That’s all, now you’ve successfully created a Responsive Navbar with Search Box using HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.

]]>
https://www.codingnepalweb.com/responsive-navbar-with-search-box/feed/ 50
Responsive Navbar with Search Box using HTML CSS https://www.codingnepalweb.com/responsive-navbar-with-search-box-html-css/ https://www.codingnepalweb.com/responsive-navbar-with-search-box-html-css/#respond Sun, 26 Apr 2020 08:14:00 +0000 https://codingnepalweb.com/2020/04/26/responsive-navbar-with-search-box-using-html-css/ Responsive Navbar with Search Box using HTML CSS

Previously I have shared a Responsive Navigation Menu Bar using HTML & CSS only, now it’s time to create a Responsive Navbar with Search Box using HTML CSS. Nowadays most peoples prefer a Responsive Navbar with Searchbox because users can easily get their information via search.

As you can see in the image, this is a Responsive Navbar with Searchbox. There are some icons, texts, and one search box This is a fully Responsive Navbar with HTML and CSS. When you open this Navbar on mobile devices, it’ll automatically adjust its height and width according to the device’s height and width.

If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Responsive Navbar with Search Box).

Video Tutorial of Responsive Navbar with Search Box

 
I hope now your doubts are clear. If you have any questions about this video you can easily comment down below. As you know this is a Fully Responsive Navbar with Searchbox using HTML & CSS. And, the CSS @media property is used to make this Navbar responsive.

If you like this program (Responsive Navbar with Search Box) and want to get source codes for this design, you can easily get all codes from the download link which is given below.

Responsive Navbar with Search Box [Source Codes]

To create this program (Responsive Navbar with Search Box). 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.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <!-- <title>Responsive Navbar with Searchbox</title> -->
      <link rel="stylesheet" href="style.css">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
      <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
   </head>
   <body>
      <nav>
         <ul>
            <li class="logo">CodingNepal</li>
            <li class="btn"><span class="fas fa-bars"></span></li>
            <div class="items">
               <li><a href="#">Home</a></li>
               <li><a href="#">About</a></li>
               <li><a href="#">Services</a></li>
               <li><a href="#">Contact</a></li>
            </div>
            <li class="search-icon">
               <input type="search" placeholder="Search">
               <label class="icon">
               <span class="fas fa-search"></span>
               </label>
            </li>
         </ul>
      </nav>
      <div class="content">
         <div class="text">
            Responsive Navbar with Searchbox
         </div>
         <div class="p">
            HTML and CSS (Flexbox) Full video tutorial
         </div>
      </div>
      <script>
         $('nav ul li.btn span').click(function(){
           $('nav ul div.items').toggleClass("show");
           $('nav ul li.btn span').toggleClass("show");
         });
      </script>
   </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  color: #f2f2f2;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}
nav{
  background: #222222;
  padding: 10px 40px 10px 70px;
  border: 1px solid #000;
  border-left: none;
  border-right: none;
}
nav ul{
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
nav ul li.logo{
  flex: 1;
  font-size: 30px;
  font-weight: 700;
}
nav ul div.items{
  padding: 0 25px;
  display: inline-flex;
}
nav ul div.items a{
  text-decoration: none;
  font-size: 18px;
  padding: 0 12px;
}
nav ul div.items a:hover{
  color: cyan;
}
nav ul .search-icon{
  height: 40px;
  width: 240px;
  display: flex;
  background: #f2f2f2;
  border-radius: 5px;
}
nav ul .search-icon input{
  height: 100%;
  width: 200px;
  border: none;
  outline: none;
  padding: 0 10px;
  color: #000;
  font-size: 16px;
  border-radius: 5px 0 0 5px;
}
nav ul .search-icon .icon{
  height: 100%;
  width: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid #cccccc;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
}
nav ul .search-icon .icon:hover{
  background: #e6e6e6;
}
nav ul .search-icon .icon span{
  color: #222222;
  font-size: 18px;
}
nav ul li.btn{
  font-size: 29px;
  flex: 1;
  padding: 0 40px;
  display: none;
}
nav ul li.btn span{
  height: 42px;
  width: 42px;
  text-align: center;
  line-height: 42px;
  border: 1px solid #151515;
  border-radius: 5px;
  cursor: pointer;
}
nav ul li.btn span.show:before{
  content: '\f00d';
}
@media screen and (max-width: 1052px) {
  nav{
    padding: 10px 40px 10px 0px;
  }
  nav ul li.logo{
    display: none;
  }
  nav ul div.items{
    flex: 4;
  }
}
@media screen and (max-width: 800px){
  nav ul li.btn{
    display: block;
  }
  nav{
    z-index: 1;
    padding: 9px 40px 9px 0;
  }
  nav ul div.items{
    z-index: -1;
    position: fixed;
    top: -220px;
    right: 0;
    width: 100%;
    background: #222222;
    display: inline-block;
    transition: top .4s;
  }
  nav ul div.items.show{
    top: 60px;
  }
  nav ul div.items li{
    text-align: center;
    line-height: 30px;
    margin: 30px 0;
  }
  nav ul div.items li a{
    font-size: 19px;
  }
}
@media screen and (max-width: 405px) {
  nav ul{
    flex-wrap: nowrap;
  }
  nav ul li.search{
    width: 50vmin;
  }
  nav ul li input{
    width: 40vmin;
  }
  nav ul li .search-icon{
    width: 10vmin;
  }
}
.content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  padding: 0 40px;
  z-index: -2;
}
.content .text{
  font-size: 40px;
  font-weight: 800;
  padding: 5px 0;
  color: #202020;
}
.content .p{
  font-size: 28px;
  font-weight: 600;
  color: #202020;
}

That’s all, now you’ve successfully created a Responsive Navbar with Search Box using HTML CSS. If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

 

]]>
https://www.codingnepalweb.com/responsive-navbar-with-search-box-html-css/feed/ 0