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.
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 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.
