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

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS