jquery - Making a responsive navigation bar with a search button -
i trying make responsive navigation bar using bootstrap. want build http://wordpress.org/support/topic/want-to-move-search-option-from-header-to-navigation-bar . .
but search button don't go right , when collapsed tabs split , move line below. @ place of download wordpress button want login , signup buttons. on collapsing brand name, search button , bars opening menu should shown in same line.
can please tell how it? see code
<!-- brand , toggle grouped better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">brand name</a> <form class="navbar-form navbar-right" style="float: right;" role="search"> <input type="text" class="form-control" placeholder="search"> </form> </div> <div style="clear:both"></div> <!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse" id="navbar-collapse-1"> <ul class="nav navbar-nav navbar-left"> <li class="active"><a href="#">home</a></li> <li><a href="#">highlights</a></li> <li><a href="#">test yourself</a></li> <li><a href="#">interesting questions</a></li> <li><a href="#">ask queries</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">signup</a></li> <li><a href="#">login</a></li> </ul> </div> </div> </nav> .navbar { min-height: 120px; } .navbar .container { padding-top: 20px; padding-bottom: 20px; } .navbar-nav>li>a { text-transform: uppercase; font-family: "jokerman"; font-size: 16px; } @media (min-width: 768px) { .navbar-nav { margin: 0 auto; display: table; table-layout: fixed; float: none; } }
i don't understand if search-input should visible in xs view here working :
js fidlle : http://jsfiddle.net/8hrnkbal/1/
the first problem in fiddle bootstrap loaded before jquery, jquery must load in first...
html:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <!-- brand , toggle grouped better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">brand name</a> </div> </div> <div style="clear:both"></div> <!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse" id="navbar-collapse-1"> <ul class="nav navbar-nav navbar-left"> <li class="active"><a href="#">home</a></li> <li><a href="#">highlights</a></li> <li><a href="#">test yourself</a></li> <li><a href="#">interesting questions</a></li> <li><a href="#">ask queries</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">signup</a></li> <li><a href="#">login</a></li> </ul> <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="search"/> </div> </form> </div> </div> </nav> 
Comments
Post a Comment