html - Adjust Search Form on Navbar Bootstrap 3 -
trying code working hamburger glyphicon, , nav-brand on left hand side on right hand side (left - right) have search form -> message glyph -> user glyph
i have in correct order now, reason cannot search form other side unless use pull-right , puts on opposite side of glyphs
<!-- navigational bar --> <nav id="navbar" class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button href="#menu-toggle" class="slidebar-toggle" id="menu-toggle"> <span class="glyphicon glyphicon-menu-hamburger blue"></span> </button> <span><a class="navbar-brand" href="/">title</a></span> </div> <!-- menu & search items right side of navbar --> <div class="navbar-collapse collapse pull-right"> <div class="container-fluid"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="alerts"><i class="glyphicon glyphicon-comment blue"></i></a> </li> <li class="dropdown"> <a href="#" class="alerts" data-toggle="dropdown"><i class="glyphicon glyphicon-user blue"></i><b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="/"><i class="glyphicon glyphicon-user"></i> link 1</a></li> <li><a href="/"><i class="glyphicon glyphicon-plus"></i> link 2</a></li> <li><a href="/"><i class="glyphicon glyphicon-cog"></i> link 3</a></li> </ul> </li> </ul> </div> </div> <div id="search_block_top" class="col-sm-8 clearfix"> <form class="navbar-form" role="search"> <div class="input-group"> <input type="text" class="form-control" placeholder="search" name="srch-term" id="srch-term"> <div class="input-group-btn"> <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search blue"></i></button> </div> </div> </form> </div> </nav>
just looking way search form moved on right, appreciated
move search_block_top
div above navbar-collapse
div, remove col-sm-8
class , clearfix
class , give class of pull-right
Comments
Post a Comment