"Simple Navbar Search"
Bootstrap 3.1.0 Snippet by mouse0270

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> <form class="navbar-form" role="search"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search"> <span class="input-group-btn"> <button type="reset" class="btn btn-default"> <span class="glyphicon glyphicon-remove"> <span class="sr-only">Close</span> </span> </button> <button type="submit" class="btn btn-default"> <span class="glyphicon glyphicon-search"> <span class="sr-only">Search</span> </span> </button> </span> </div> </form> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="container"> <div class="row"> <div class="alert alert-info"> <strong>Alerts Dont Work on Bootsnipp!</strong> So when you hit enter or submit this form your result will show up in the green box below! </div> <div class="alert alert-success"> <strong>Your Result!</strong> <span id="showSearchTerm"></span> </div> </div> </div>
body { padding: 60px 0px; } .navbar-collapse { position: relative; padding-top: 30px !important; max-height: 270px; } .navbar-collapse form[role="search"] { position: absolute; top: 0px; right: 0px; width: 100%; padding: 0px; margin: 0px; z-index: 0; } .navbar-collapse form[role="search"] button, .navbar-collapse form[role="search"] input { padding: 8px 12px; border-radius: 0px; border-width: 0px; color: rgb(119, 119, 119); background-color: rgb(248, 248, 248); border-color: rgb(231, 231, 231); box-shadow: none; outline: none; } .navbar-collapse form[role="search"] input { padding: 16px 12px; font-size: 14pt; font-style: italic; color: rgb(160, 160, 160); box-shadow: none; } .navbar-collapse form[role="search"] button[type="reset"] { display: none; } @media (min-width: 768px) { .navbar-collapse { padding-top: 0px !important; padding-right: 38px !important; } .navbar-collapse form[role="search"] { width: 38px; } .navbar-collapse form[role="search"] button, .navbar-collapse form[role="search"] input { padding: 15px 12px; } .navbar-collapse form[role="search"] input { font-size: 18pt; opacity: 0; display: none; height: 50px; } .navbar-collapse form[role="search"].active { width: 100%; } .navbar-collapse form[role="search"].active button, .navbar-collapse form[role="search"].active input { display: table-cell; opacity: 1; } .navbar-collapse form[role="search"].active input { width: 100%; } }
$(function () { // Remove Search if user Resets Form or hits Escape! $('body, .navbar-collapse form[role="search"] button[type="reset"]').on('click keyup', function(event) { console.log(event.currentTarget); if (event.which == 27 && $('.navbar-collapse form[role="search"]').hasClass('active') || $(event.currentTarget).attr('type') == 'reset') { closeSearch(); } }); function closeSearch() { var $form = $('.navbar-collapse form[role="search"].active') $form.find('input').val(''); $form.removeClass('active'); } // Show Search if form is not active // event.preventDefault() is important, this prevents the form from submitting $(document).on('click', '.navbar-collapse form[role="search"]:not(.active) button[type="submit"]', function(event) { event.preventDefault(); var $form = $(this).closest('form'), $input = $form.find('input'); $form.addClass('active'); $input.focus(); }); // ONLY FOR DEMO // Please use $('form').submit(function(event)) to track from submission // if your form is ajax remember to call `closeSearch()` to close the search container $(document).on('click', '.navbar-collapse form[role="search"].active button[type="submit"]', function(event) { event.preventDefault(); var $form = $(this).closest('form'), $input = $form.find('input'); $('#showSearchTerm').text($input.val()); closeSearch() }); });

Related: See More


Questions / Comments:

Does anyone have a bootstrap 4 version of this please

Zaakirah () - 5 years ago - Reply 0


If you guys notice, hovering over Brand doesn't work. http://stackoverflow.com/qu... to solve this issue. Hope it will help :)

Slashable () - 8 years ago - Reply 0


very nice

ryascreative () - 9 years ago - Reply 0


could somebody fix this one does not work for 3.2 bootstrap because they changed it https://github.com/twbs/boo...

#12759: Make input groups in inline forms use display: table-cell so they are sized properly and appear on the same line as intended.

Zoran Knezevic () - 9 years ago - Reply 0


what do you mean?

emidiob () - 9 years ago - Reply 0


try it with 3.2 and see does it work ok

Zoran Knezevic () - 9 years ago - Reply 0


Yeah. Just tried. The layout is all messed up. I don't know how to fix. it's a pity. good snippet btw

emidiob () - 9 years ago - Reply 0


I also like it very effective way to save space especially on mobile but it has own disadvantages... it is not obvious for users what to do you have to style it a bit more to make it functionally understandable

Zoran Knezevic () - 9 years ago - Reply 0


how can i change the search input width??? I dint want it gives all width of nav when I click on search button? thanks

sara giahi () - 9 years ago - Reply 0


Not bad!

moscoz () - 9 years ago - Reply 0


very nice!

Daniel Sikes () - 9 years ago - Reply 0