How to add a search box to your website's navigation bar
Moving the search box into the navigation bar
Styling the search box
Incorporating the search box into a responsive navigation bar
Complete code

How to add a search box to your website's navigation bar

In this tutorial, we will expand upon our previous tutorials on how to build a search engine and navigation bar and learn how to add a search box to the navigation bar. We'll also discuss how to make the search box responsive to differently sized browser windows, to ensure it looks good on all devices.

Moving the search box into the navigation bar

At the end of the tutorial on building a search engine, we added the search box to the middle of the webpage. To move the search box into the navigation bar, cut all the code for the search box (which is contained within the div tags that were assigned the class 'search-box') and paste it below the links in the navigation bar:

<body>
<div class="navbar">
    <a href="http://treesandtrees.com">Home</a>
    <a href="http://treesandtrees.com/About/">About</a>
    <a href="http://treesandtrees.com/TreeTypes/">Types of Trees</a>
    <div class="search-box">
        <form action="search.php" method="get">
            <input type="text" name="search" maxlength="60" placeholder="Search..." required>
            <button type="submit"><i class="fa fa-search"></i></button>
        </form>
    </div>
</div>

</body>

Styling the search box

We'll now discuss how to style the search box using CSS so it integrates effectively with the navigation bar. Load up your 'main.css' stylesheet and locate the .search-box entry we added in the search engine tutorial. Delete the position, top and left properties. In their place, insert the 'float' property and set it to 'right'. This will cause the search box to position itself on the right-hand side of the navigation bar.

.search-box {
	float: right;
}

The search box is now in the right general area of the navigation bar; however, it may still require a little repositioning. You can adjust the search box's position by editing its margins. For example, if you want to move the search box downward then add a 'margin-top' to the input and button, and if you want to shift the search box to the left then add a 'margin-right' to the button. While you're at it, you may also want to change the 'width' of the input to a value in pixels so you know how much space it will occupy in the navigation bar.

.search-box button {
	height: 32px;
	width: 32px;
	margin-left: -5px;
	background: LightGrey;
	font-size: 17px;
	border: none;
	margin-top: 14px;
	margin-right: 16px;
}
		
.search-box input[type=text] {
	height: 26px;
	font-size: 17px;
	width: 200px;
	margin-top: 14px;
}

Congratulations! You have now successfully added a search box to the navigation bar. In the second half of this tutorial, we will cover how to integrate the search box into a responsive navigation bar: a navigation bar which changes its appearance to suit smaller screen sizes such as mobile phones.

Incorporating the search box into a responsive navigation bar

As it stands, the search box and navigation bar should look like this:

If you have followed the previous tutorial on how to make the navigation bar responsive, then you should already have a navigation bar which becomes expandable/contractable on small screens. This part of the tutorial will cover how to keep the search box hidden on small screens until the bars icon is clicked. To start with, we should set the 'display' value for our search box to become 'none' on small screens, thereby hiding it from view. You could add the code for this to the @media screen entry we created in the tutorial on building a responsive navigation bar:

@media screen and (max-width: 650px) {
	.navbar a:not(:first-child) {display: none;}
	.navbar a.icon {
		display: block;
		float: right;
	}
	.search-box {
		display: none;
	}
}

We can now add the JavaScript and CSS that will unhide the search box when the bars icon is clicked. Similar to the JavaScript we applied to the navbar class in the tutorial on building a responsive navigation bar, the JavaScript we write here will add the 'expanded' class to the search-box class. To start with, add an id of 'search-responsive' to the open 'div' tag which was assigned the search-box class. An id is similar to a class in that it allows an element to be styled using CSS or made interactive using JavaScript; however, unlike classes, id's are only meant to be used by one element.

<div class="search-box" id="search-responsive">
	<form action="search.php" method="get">
		<input type="text" name="search" maxlength="60" placeholder="Search..." required>
		<button type="submit"><i class="fa fa-search"></i></button>
	</form>
</div>

Next, we add the following JavaScript code to the navbar.js file we created in the building a responsive navigation bar tutorial:

function search_expand() {
	var x = document.getElementById("search-responsive");
	if (x.className === "search-box") {
	x.className += " expanded";
	} else {
	x.className = "search-box";
	}
}

To make sure the above JavaScript is engaged when the bars icon is clicked, we must add the search_expand() function to the list of scripts that is executed. This list can be found in the HTML file below the search box code.

<a href="javascript:void(0);" class="icon" onclick="expansion();search_expand()">
	<i class="fa fa-bars"></i>
</a>

The JavaScript code is now complete. Let's now turn our attention to how the search box will look like when the navigation bar is expanded. When the bars icon is clicked, the search-box class will have the expanded class added to it. To target the search box in this state, your CSS stylesheet entry should look like this:

.search-box.expanded {
	display: block;
	float: left;
	margin-left: 16px;
	padding-bottom: 8px;
}

In the above code, the block 'display' property will unhide the search box when the bars icon is clicked, while the left 'float' property will ensure the search box aligns itself down the left-hand side with the links. The 'margin-left' and 'padding-bottom' properties help position the search box within the navigation bar and ensure things don't get too cramped.

And that is it! The navigation bar will now look like this on small screens before and after the bars icon is clicked:

Complete code

The complete HTML code for the responsive navigation bar with an integrated search box is shown below:

<!DOCTYPE html>
<html lang="en-GB">
<head>
	<title>Home</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="main.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<script src="navexpansion.js"></script>
</head>
<body>
<div class="navbar" id="myTopnav">
	<a href="http://treesandtrees.com">Home</a>
	<a href="http://treesandtrees.com/About/">About</a>
	<a href="http://treesandtrees.com/TreeTypes/">Types of Trees</a>
	<div class="search-box" id="search-responsive">
		<form action="search.php" method="get">
			<input type="text" name="search" maxlength="60" placeholder="Search..." required>
			<button type="submit"><i class="fa fa-search"></i></button>
		</form>
	</div>
	<a href="javascript:void(0);" class="icon" onclick="expansion();search_expand()">
		<i class="fa fa-bars"></i>
	</a>
</div>
</body>
</html>

The complete navbar.js JavaScript file:

function expansion() {
	var x = document.getElementById("myTopnav");
	if (x.className === "navbar") {
	x.className += " expanded";
	} else {
	x.className = "navbar";
	}
}
	
function search_expand() {
	var x = document.getElementById("search-responsive");
	if (x.className === "search-box") {
	x.className += " expanded";
	} else {
	x.className = "search-box";
	}
}

How to add a search box to your website's navigation bar

Complete code

<<< Previous

Next >>>