css - Bootstrap: search visible when navbar collapsed -

css - Bootstrap: search visible when navbar collapsed -

i want have search bar visible when navbar collapses.

my code: http://jsfiddle.net/edalzell/a3yng825/1/ works when collapsed shows 2 search bars when expanded.

html:

<header class= "blog-masthead"> <nav class="navbar" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <form class="navbar-form collapsed navbar-right" role="search" action="/search" method="get"> <div class="form-group input-group"> <input type="text" class="form-control input-sm" placeholder="search" id="sitesearch" name="query"> <span class="input-group-addon"><button type="submit" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-search"></span></button></span> </div> </form> </div> <!-- navbar-header --> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav navbar-left"> <li><a href="/blog">blog</a></li> <li><a href="/about">about</a></li> </ul> <form class="navbar-form navbar-right" role="search" action="/search" method="get"> <div class="form-group input-group"> <input type="text" class="form-control input-sm" placeholder="search" id="sitesearch" name="query"> <span class="input-group-addon"><button type="submit" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-search"></span></button></span> </div> </form> </div> <!-- navbar-collapse --> </div> </nav> </header>

that because have 2 search bars declared,you have couple of options desired result

remove searchbar have declared in collapse section

hide/show specific items on desired resolution ,you can check this thread

i have used first way ,you can find jsfiddle here

complete code:

<header class= "blog-masthead"> <nav class="navbar" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <form class="navbar-form collapsed navbar-right" role="search" action="/search" method="get"> <div class="form-group input-group"> <input type="text" class="form-control input-sm" placeholder="search" id="sitesearch" name="query"> <span class="input-group-addon"><button type="submit" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-search"></span></button></span> </div> </form> </div> <!-- navbar-header --> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav navbar-left"> <li><a href="/blog">blog</a></li> <li><a href="/about">about</a></li> </ul> </div> <!-- navbar-collapse --> </div> </nav> </header>

css twitter-bootstrap-3