How to add a search box inside a responsive navigation menu using CSS?
The search box is generally added inside a navbar. It is used to search for some specific content on the website. In this tutorial, we will be learning to add a search box inside a responsive navbar using CSS properties.
Adding a search box in responsive navbar
The search box can be added to the navbar by using the <input> tag. So add the <input> element within the navbar container with type="text" attribute. This will create a text input field inside the navbar and be used as the search box. The float property will let the text box align left or right within the navbar.
The Responsive Navbar
The navbar will have placed horizontally for the large screens. But for the small screen, we will place the navbar vertically. A hamburger menu will be added to hide and show elements on the navbar.
- Use
@media rule to create the responsive navbar.
- The hamburger icon will be hidden by default using
display: none property which will float: right for the small screen.
- The responsive navbar will be
position:relative whereas the icon will position: absolute.
- Use text-align: left to align it to the left.
- Also, use
display: block so that links are stacked one after another.
- JavaScript
onclick() event is added to the hamburger menu to open it on click.
Example: Add search box inside the responsive navbar
In the following program, we have added a search box inside a responsive navbar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.navbar {
overflow: hidden;
background-color: cyan;
}
.navbar a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
.active {
background-color: #04AA6D;
color: white;
}
.navbar .icon {
display: none;
}
.navbar a:hover, input:hover {
background-color: #dddddd;
color: black;
}
/* CSS for search box */
.navbar input[type=text] {
float: right;
padding: 12px;
border: none;
margin-top: 3px;
margin-right: 5px;
}
@media screen and (max-width: 600px) {
.navbar a:not(:first-child), .navbar input {
display: none;
}
.navbar a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.navbar.responsive {position: relative;}
.navbar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
.navbar.responsive input {
float: none;
display: block;
width: 90%;
padding: 12px;
border: 2px solid black;
text-align: left;
}
}
</style>
</head>
<body>
<div class="navbar" id="nav">
<a href="#" class="active">Home</a>
<a href="#">course</a>
<a href="#">More</a>
<input type="text" placeholder="Search Here">
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>
<div class = "text">
<h2>Responsive navbar with search box</h2>
<p>Change the size to browser to see effects</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("nav");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
</script>
</body>
</html>
Output
Here is the output of the above program.
For a wider screen, the search box is at the right of the navbar.
For smaller screens, the navbar is aligned vertically.
Example: Adding a search box to the responsive navbar
In the example, the hamburger menu will float left to open a responsive navbar with the search box.
Conclusion
In this tutorial, we have learned to add a search box inside a responsive navbar with CSS. The search box can float to right for a wider screen and to the bottom of the navbar for the smaller screen that's make it responsive.
