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.
Great example!
How do I centre the search?
hello coding nepal
my browser says you dont have the javascript
-k.o
thank you
You’re the best , thanks for sharing your hard work
hello!
hi
Hello,
are we able to recover the code to put it on its production site?
i am not able to copy this code?
Make sure you’ve disable adblocker for our site
How to make search box only for our site please make video on it and I am big fan of you
You can use PHP/SQL to fetch data from the database according to the user query.
can anyone use this in Production (by changing some styles , fonts test )?
I didn’t understand. Can you explain more?
i copied the files but the search bar doesn't coming when i make it narrow.
You're most welcome 🙂
Thanks 🙂
You're most welcome
Thank you for sharing your hard work!
Yes it is on blogger
Will it work on blogger?
Is this website is on blogger?
what type of errors?
theres error in placeholder="Search" required>
If you changes some codes with our tutorial codes then I can't help you without viewing codes.
Yeah I did and pasted them over the code I wrote and still the same problem. The source works fine. Once I shrink the page down past 1140px width is when they disappear on my html file. My html is different from your source code but I don't see anything that could be wrong, but I am new to coding so I am likely missing something obvious. If this seems like a lot of trouble no worries, I'll figure it out eventually. Thanks for this though, it is very helpful.
The dev tools console says I get a typeError in the JS file "TypeError: Cannot set property 'onclick' of null" for the menuBtn.onclick.
No need to respond to this I will figure it out.
menu-icon class was wrong
Just download the offline files from the fontawesome and give the path of the downloaded file inside href attribute of link tag in the HTML file.
How to use the font awesome works in offline?
Did you download the source files or copy paste the codes?
You need to do some js codes for making this search bar working.
I'm missing the menu on the left and the search on the right when I zoom in. I rewrote it with the JS as a separate file. Could you point me in the right direction? I can't seem to find the mistake.
You're welcome!
You're the best @Codingnepal. Thanks a lot
OK
hi sir how put txt messege in about?
If you're using blogger…you need to create a page and write there.
hi sir how to put txt messge in about?
Great You can find the codes of this designs on this website…Search it!
great,
I went to Responsive Navbar with Search Box and Sidebar Menu both
Please contact me on Instagram.
hello sir! i want to know how to make the search box work i mean like it gets us to places im a web dev and i want to make a resturant search so please help me with it
How can we make the search button working ?
We need JavaScript for that. I'll make video on it.
How can we make the search box working ? and your video is too awesome. thanks for the awesome content.
You need to add font awesome CDN link inside head tag of your html file.
how to include the font awesome file in visual studio?
its from google fonts
You need to search the kind of font that you want then add the link in your html and and copy the font in your css
its very nice, please prepare dash board design for school management system and simple school management software its very use full for many schools