"Even Simpler Navbar Search"
Bootstrap 3.1.0 Snippet by sconstantinides

<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="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; } @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 { padding: 25px 12px; font-size: 18pt; opacity: 0; display: none; } .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%; text-align: right; } .navbar-collapse form[role="search"].active button[type="submit"] { background-color: rgb(231, 231, 231); } }
$(function () { 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() }); });

Similar snippets: See More


Comments:

mouse0270 2014-07-15 02:15:01
    Looks good!
Guest 2014-07-21 17:56:52
    Don't work on last FF ;)
Top-Serveurs 2014-07-21 17:57:55
    Don't work on latest FF ;)
mouse0270 2014-07-21 18:31:05
    To fix this issue, remove padding from line from line 49 and add height of 51 pixels. This will make it work on FF.
Top-Serveurs 2014-07-21 19:30:00
    Thanks :)
mouse0270 2014-07-21 18:46:28
    You should also add a close button or some way for the user to cancel their search. Currently if a user would like to back out of a search they have to reload the entire page.
Dominic Nunes 2014-07-26 00:07:01
    just click the search button again.
mouse0270 2014-07-26 01:01:36
    That is because this demo prevents the form from actually submitting. If the someone took this snippet and added it to their site and had the search point to a new page. Once the user hit the search icon they are dedicated to searching. If they were to hit the button again it would submit a search with what ever was in the box before they decided to back out.
Dominic Nunes 2014-07-29 18:24:33
    oh sorry, you're right.
EA 2014-08-05 00:17:24
    Hi I have a problem of extending the input. The input does not expand to its maximum width. Please advice.
bayaraa 2016-03-21 10:36:22
    me too, expanding search section not maximum width. plz let me know what happen in css
Frosty 2014-10-14 12:33:28
    Doesn't work with BS 3.2. Please help
maxsurguy 2014-10-15 06:36:53
    What's the error?
Cassia 2015-02-19 13:36:51
    I really like this snippet but there is a bug. when I take the code and implement it the search jumps to the left side of the navbar. I fixed it but then the navigation doesn't collapse the right way. I'm not sure what it could be. the demo you have here works fine but for whatever reason it doesn't when i grab it and use 3.3.2.
Cassia 2015-02-19 13:39:01
    even when you change the theme in the demo it happens. so that you can see what I'm talking about.
Miles Evans 2015-12-21 03:16:32
    Any idea how to get it to stop floating to the left like that?
bayaraa 2016-03-21 11:02:09
    how did u fix it that jump to the left side of navbar? sorry i am beginner. plz advise me
Cassia Nicole 2016-03-21 13:13:35
    I never did.
P├ęter 2017-02-15 12:01:49
    dont work...
mouse0270 2017-02-15 12:30:51
    Browser and version? Do you have JavaScript enabled?

Commenting will be back soon.