Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to add a search box inside a responsive navigation menu?
To add a search box inside a responsive navigation menu, you need to combine navigation links with an input element and use CSS to style and position them appropriately. The search box should adapt to different screen sizes using media queries.
Syntax
nav {
/* Navigation container styles */
}
.links {
/* Navigation link styles */
}
input[type="text"] {
/* Search box styles */
}
@media screen and (max-width: breakpoint) {
/* Responsive styles */
}
Creating the Navigation Structure
First, create the HTML structure using the <nav> element with navigation links and a search input −
<!DOCTYPE html>
<html>
<head>
<style>
nav {
width: 100%;
background-color: #333;
overflow: auto;
padding: 0;
}
.links {
display: inline-block;
padding: 14px 16px;
color: #f2f2f2;
text-decoration: none;
font-size: 17px;
transition: background-color 0.3s;
}
.links:hover {
background-color: #575757;
}
.selected {
background-color: #04AA6D;
}
</style>
</head>
<body>
<nav>
<a class="links selected" href="#">Home</a>
<a class="links" href="#">About</a>
<a class="links" href="#">Services</a>
<a class="links" href="#">Contact</a>
</nav>
</body>
</html>
A dark navigation bar with four horizontal links (Home, About, Services, Contact) appears. The Home link is highlighted in green, and links change to gray on hover.
Adding the Search Box
Now add the search input and position it on the right side of the navigation −
<!DOCTYPE html>
<html>
<head>
<style>
nav {
width: 100%;
background-color: #333;
overflow: auto;
padding: 0;
}
.links {
display: inline-block;
padding: 14px 16px;
color: #f2f2f2;
text-decoration: none;
font-size: 17px;
transition: background-color 0.3s;
}
.links:hover {
background-color: #575757;
}
.selected {
background-color: #04AA6D;
}
input[type="text"] {
float: right;
padding: 8px;
margin: 8px;
font-size: 16px;
border: none;
border-radius: 4px;
background-color: #f2f2f2;
}
input[type="text"]:focus {
outline: 2px solid #04AA6D;
}
</style>
</head>
<body>
<nav>
<a class="links selected" href="#">Home</a>
<a class="links" href="#">About</a>
<a class="links" href="#">Services</a>
<a class="links" href="#">Contact</a>
<input type="text" placeholder="Search..." />
</nav>
</body>
</html>
A navigation bar with links on the left and a search box positioned on the right side. The search box has rounded corners and shows a green outline when focused.
Making it Responsive
Use media queries to make the navigation responsive for smaller screens. When the screen width is less than 600px, the links and search box stack vertically −
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
nav {
width: 100%;
background-color: #333;
overflow: auto;
}
.links {
display: inline-block;
padding: 14px 16px;
color: #f2f2f2;
text-decoration: none;
font-size: 17px;
transition: background-color 0.3s;
}
.links:hover {
background-color: #575757;
}
.selected {
background-color: #04AA6D;
}
input[type="text"] {
float: right;
padding: 8px;
margin: 8px;
font-size: 16px;
border: none;
border-radius: 4px;
background-color: #f2f2f2;
width: 200px;
}
input[type="text"]:focus {
outline: 2px solid #04AA6D;
}
@media screen and (max-width: 600px) {
.links {
display: block;
text-align: left;
}
input[type="text"] {
float: none;
display: block;
width: calc(100% - 16px);
margin: 8px;
text-align: center;
}
}
</style>
</head>
<body>
<nav>
<a class="links selected" href="#">Home</a>
<a class="links" href="#">About</a>
<a class="links" href="#">Services</a>
<a class="links" href="#">Contact</a>
<input type="text" placeholder="Search..." />
</nav>
<div style="padding: 20px;">
<h2>Responsive Navigation Demo</h2>
<p>Resize the browser window to see the responsive behavior. When the screen width is less than 600px, the navigation links and search box will stack vertically.</p>
</div>
</body>
</html>
A responsive navigation bar that displays horizontally on larger screens with the search box on the right. On smaller screens (below 600px), the links stack vertically with the search box spanning the full width below the navigation links.
Conclusion
Creating a responsive navigation with a search box involves using flexbox or float positioning for desktop layouts and media queries to reorganize elements for mobile devices. The key is ensuring the search box adapts properly to different screen sizes while maintaining usability.
Updated on: 2026-03-15T14:15:10+05:30
380 Views
Advertisements