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.
