Navigation Bar with Search Box Using HTML & CSS

Hey friends, today we will see how to make this simple navbar with a search bar input field using html and css only. The demo is available at the bottom of the page.

Now let’s see the general use of this project. Sometimes your websites may have multiple sections. And to show what sections you have, we use a navigation bar to make it easy for the user. In this project, we also added a search bar in the navigation bar so that the user can search for any page too.

Now let’s see the codes

HTML Code For Navigation Bar with Search Box

Paste the codes below:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Add this Link In the HTML File, this Fontawesome CDN URL is needed for the search icon inside a navbar.☝

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
  <div class="search-container">
    <form action="/action_page.php">
      <input type="text" placeholder="Search.." name="search">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
</div>

<div style="padding-left:16px">
<h2>Responsive Search Bar</h2>
<p>Navigation bar with a search box and a submit button inside of it.</p>
<p>Resize the browser window to see the responsive effect.</p>
</div>

The output would be:

Portfolio Website using HTML and CSS (Source Code)

Now let’s use CSS to style it.

CSS Code For Navigation Bar with Search Box

Paste the CSS Codes below:

 @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

* {box-sizing: border-box;}

body {
margin: 0;
font-family: poppins, sans-serif;
}

.topnav {
overflow: hidden;
background-color: #e9e9e9;
}

.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

.topnav a:hover {
background-color: #ddd;
color: black;
}

.topnav a.active {
background-color: royalblue;
color: white;
}

.topnav .search-container {
float: right;
}

.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}

.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}

.topnav .search-container button:hover {
background: #ccc;
}

@media screen and (max-width: 600px) {
.topnav .search-container {
float: none;
}
.topnav a, .topnav input[type=text], .topnav .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}

Final Output Of Navigation Bar with Search Box Using Html and Css

50+ HTML, CSS & JavaScript Projects With Source Code

And that’s all for this project!

written by @codingporium