"navbar affix search inline"
Bootstrap 3.3.0 Snippet by DSergio

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <body> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet" type="text/css"> <header><p>Scroll to affix</p></header> <nav class="navbar navbar-default affix-top" role="navigation" id="BB-nav"> <div class="container-fluid"> <div class="container nav-container"> <!-- <div class="navbar-header">--> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".BB-nav"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- </div>--> <ul id="menu-menu" class="nav navbar-nav BB-nav collapse navbar-collapse"> <li class="menu-item"><a title="Itme1" href="#">Item 1</a></li> <li class="menu-item"><a title="Itme2" href="#">Item21</a></li> </ul> <ul class="nav navbar-nav navbar-right nav-pills"> <li> <a href="https://www.facebook.com/bruyerefreelance" target="_blank"> <i class="fa fa-facebook"></i> </a> </li> <li> <a href="https://twitter.com/BruyereWeb" target="_blank"> <i class="fa fa-twitter"></i> </a> </li> <li> <a href="https://plus.google.com/114186096795183702361" target="_blank"> <i class="fa fa-google"></i> </a> </li> <li class="li-form"> <!-- SEARCH --> <form role="search" id="search-nav" method="get" action="#"> <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Rechercher :"> <button type="reset"> <span class="fa fa-close"> <span class="sr-only">Close</span> </span> </button> <button type="submit" class="search-submit"> <span class="fa fa-search"> <span class="sr-only">Rechercher</span> </span> </button> </form> </li> </ul> </div> </div> </nav> <div class="content"></div> </body>
/*for the demo*/ header { height: 200px; } header p { padding-top: 100px; text-align: center; } .content { height: 800px; } body { max-height: 400px; } /* end demo */ /* created with Sass*/ .navbar-default { background-color: #fff; border: 3px double #eee; border-radius: 0; border-left: none; border-right: none; } #BB-nav.affix { position: fixed; top: 0px; -webkit-transition: top 1s ease-in; transition: top 1s ease-out; } #BB-nav { width: 100%; background-color: #fff; z-index: 999; top: -30px; } #BB-nav .dropdown-menu { border: none; } .BB-nav li a { background-color: transparent; font-size: 1.04em; font-weight: bold; padding-right: 20px; padding-left: 20px; display: inline-block; width: 100%; text-align: center; text-transform: uppercase; color: #202020 !important; font-family: 'Source Sans Pro', Arial, sans-serif; transition: .5s all; -webkit-transition: .5s all; -moz-transition: .5s all; -o-transition: .5s all; -ms-transition: .5s all; } .BB-nav li a:hover { background-color: transparent; color: #D75752 !important; } /*reset */ .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { background-color: transparent; color: #D75752 !important; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus, .dropdown-menu a { background-color: transparent; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border: none; } /* search Form ****/ .navbar-nav > li > form { padding-top: 10px; padding-bottom: 10px; line-height: 20px; } @media (min-width: 768px) { .navbar-nav > li > form { padding-top: 15px; padding-bottom: 15px; } } #search-nav input, #search-nav button[type="reset"] { display: none; } #search-nav input, #search-nav button { border-radius: 0px; border-width: 0px; color: #454545; background-color: transparent; border: none; box-shadow: none; outline: none; } #search-nav .search-submit { position: relative; bottom: 2px; }
$(function(){ //nav affix $('#BB-nav').affix({ offset: { top: $('header').height() } }); //search form //close on escape key $(document).keyup(function(e) { if(e.which === 27){ closeSearch(); } }); function closeSearch() { $('.search-field').val(''); $('.search-field').hide(); $('#search-nav').removeClass('active'); $('#search-nav button[type="reset"]').hide(); } function openSearch() { $('#search-nav').addClass('active'); $('.search-field').show(); $('#search-nav button[type="reset"]').show(); } // Show Search if form is not active or input search empty $('#search-nav button[type="submit"]').click(function(event) { if(!$( "#search-nav" ).hasClass( "active" ) || $('.search-field').val() === '') { event.preventDefault(); openSearch(); } }); //close form $('#search-nav button[type="reset"]').click(function(event) { //event.preventDefault(); closeSearch(); }); });

Related: See More

Argon Dashboard
Navbar Search Box Auto Expand
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Awesome Search Box

Questions / Comments: