Navbar with search field | navigation search bar using html & css only – codewithrandom







Navbar with search field | navigation search bar  using html & css only – codewithrandom




Hey friends, today we will see how to make this simple navbar with a search input field. 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 Codes

Paste the codes below:

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

Navbar with search field | navigation search bar using html & css only - codewithrandom

Now let’s use CSS to style it.


CSS Codes

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;
}
}


The final output would be:

Navbar with search field | navigation search bar using html & css only - codewithrandom

And that’s all for this project!

written by @codingporium

Share on:

Leave a Comment