"Even Simpler Navbar Search"
Bootstrap 3.1.0 Snippet by rmashhoon

<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="#">SpeedShoppr</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="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Change Shop <b class="caret"></b></a> <ul class="dropdown-menu"> <li class="active"><a href="#">Amazon</a></li> <li><a href="#">eBay</a></li> <li><a href="#">Newegg</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> </ul>
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() }); });

Related: See More


Questions / Comments: