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.
For the search box to look good in the navigation bar, we need to define some additional style instructions using CSS. Open your main.css stylesheet and locate the .search-box entry we added in the search engine tutorial. Delete the position, top and left properties. Instead, add a property called float and set its value to right. The float property will direct 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 alter the margin-top property of the input and button elements, and if you want to shift the search box to the left then add a margin-right property to the button. While you're at it, you may also want to change the width of the input element to a value in pixels so you always know how much space it will occupy.
.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 that changes its appearance to suit smaller screen sizes such as mobile phones.
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 that 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 hide the search box on small screens, then you should use a media query to set the search box's display property to none on small screens, thereby hiding it from view. To do this, add the code shown below to the @media screen entry we discussed 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, add the following JavaScript code to the navbar.js file we discussed 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 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, you should add the following entry to your CSS stylesheet:
.search-box.expanded {
display: block;
float: left;
margin-left: 16px;
padding-bottom: 8px;
}
In the above code, the search box's display property is set to block, which unhides the search box. Meanwhile, the float property is set to left, which directs the search box to align itself down the left-hand side.
And that is it! The navigation bar will now look like this on small screens before and after the bars icon is clicked:
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";
}
}