content logo

Bootstrap Search Boxes:

Expanding Bootstrap Search Box in Navbar

A navigation bar or navbar in short is a user interface which helps you navigate to other parts of the website via links within the site. Most often, the navigation bar is located at the top of the screen in the shape of a horizontal list with links to each page. A good thing to put into the navigation bar is a search box. A navbar search can help you keep your pages clean and avoid getting them cluttered. Many site owners do this to save a lot of physical space in their pages.

The CSS search expanding code displayed in this post helps you achieve the above goal. The search bar is displayed as a small magnifying glass icon (search icon) in the navigation bar. The design is really simplistic but the functionality is fine. When you click on the search icon among the other header items in the navbar, the navigation bar will be hidden temporarily and the search box will appear. You can then type in the search input. Once you’re done searching, press the button again to go back to the previous state. Search in navigation bar is quite beneficial as it does not require any space and is easily spotted. Also, you can use the code for this hide search box for yourself with absolutely no costs whatsoever.

#

Navbar Search

#

CSS Search Expanding

#

Hide Search Box

#

Search in Navigation Bar


<!-- This script got from frontendfreecode.com -->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Project Name</a>
        </div>
        <div id="titleBarNav" class="">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li class=""><a href="#">Link</a></li>
                <li class=""><a href="#">Link</a></li>
            </ul>
            <button type="button" id="searchBtn" class="btn btn-default navbar-btn"><i class="fa fa-search"></i></button>
        </div>
        <form id="searchForm" class="navbar-form hidden" role="search">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
                </span>
            </div>
        </form>
    </div>
</nav><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
$("#searchBtn").on('click', function (e) {
    $(this).addClass("hidden");
    $(this).closest($(".container-fluid")).find($("#titleBarNav")).addClass("hidden");
    $("#searchForm").removeClass("hidden");
    $("#searchForm input").focus();
});
$("#searchForm input").focusout(function (e) {
    $("#searchBtn").removeClass("hidden");
    $("#titleBarNav").removeClass("hidden");
    $("#searchForm").addClass("hidden");
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Project Name</a>
        </div>
        <div id="titleBarNav" class="">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li class=""><a href="#">Link</a></li>
                <li class=""><a href="#">Link</a></li>
            </ul>
            <button type="button" id="searchBtn" class="btn btn-default navbar-btn"><i class="fa fa-search"></i></button>
        </div>
        <form id="searchForm" class="navbar-form hidden" role="search">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
                </span>
            </div>
        </form>
    </div>
</nav><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
$("#searchBtn").on('click', function (e) {
    $(this).addClass("hidden");
    $(this).closest($(".container-fluid")).find($("#titleBarNav")).addClass("hidden");
    $("#searchForm").removeClass("hidden");
    $("#searchForm input").focus();
});
$("#searchForm input").focusout(function (e) {
    $("#searchBtn").removeClass("hidden");
    $("#titleBarNav").removeClass("hidden");
    $("#searchForm").addClass("hidden");
});
</script>

</body>
</html>
Preview