responsive design - Bootstrap 3 and CSS3 - Navbar search box placement error -

responsive design - Bootstrap 3 and CSS3 - Navbar search box placement error -

i having problem navbar search box. after making 2 buttons, 1 nav links , 1 search box, search box did not line next nav links in desktop view. sit down in new line, under logos. can't seem prepare it. tired few different methods, made main purpose of having "pancake" on left , search icon on right messed up.

here html code:

<div class="container"> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="container-fluid"> <!-- brand , toggle grouped improve mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#nav-collapse"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target="#search-collapse"> <span class="sr-only">toggle navigation</span> <span class="glyphicon glyphicon-search"></span> </button> <div class="row"> <a class="navbar-brand" href="#"><img src="img/gg_logo1.png" alt="logo 1" id="logo 2"><img src="img/gg_logo2.png" alt="gamingglitch" id="logo2"></a> </div> </div> <!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse" id="nav-collapse"> <ul class="nav navbar-nav"> <li> <a href="#">link 1</a> </li> <li> <a href="#">link 2</a> </li> <li> <a href="#">link 3</a> </li> <li> <a href="#">link 4</a> </li> </ul> </div> <div class="collapse navbar-collapse testtest" id="search-collapse"> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="search"> </div> </form> </div> </div><!-- /.container-fluid 1 --> </div> </nav>

here custom css:

body { padding-top: 100px; } button { background-color: transparent; color: #525252; cursor: pointer; font-family: inherit; } .navbar-header { height: 75px; } .navbar-inverse { background-color: #3c6aa1; background: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(0%, #4d80af), color-stop(100%, #2b5593)); background: -webkit-linear-gradient(top, #4d80af 0%, #2b5593 100%); background: -moz-linear-gradient(top, #4d80af 0%, #2b5593 100%); background: -o-linear-gradient(top, #4d80af 0%, #2b5593 100%); background: linear-gradient(top, #4d80af 0%, #2b5593 100%); background: -ms-linear-gradient(top, #4d80af 0%, #2b5593 100%); filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#ff6d94bf', endcolorstr='#ff3e648d', gradienttype=0); filter: none; border: 0px; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.38); color:#ffffff; display: block; font-size: 12px; font-size: 1.2rem; font-weight: bold } .navbar-inverse .navbar-toggle { color: white; font-weight: bold; border-color: white; float: left; height: 75% ; width: 42px; border: 0 1px 0 0 solid #cccccc; position: relative; box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.38); } .navbar-inverse .navbar-nav > li > { color: #ffffff; } .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus { color: #cccccc; background-color: transparent; } .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus { color: #ffffff; } .navbar-inverse .navbar-nav > .disabled > a, .navbar-inverse .navbar-nav > .disabled > a:hover, .navbar-inverse .navbar-nav > .disabled > a:focus { color: #cccccc; background-color: transparent; } .navbar-nav { margin-top: 16px; } #logo1 { margin-top: -3px; } #logo2 { margin-left: 16px; margin-bottom: 13px; }

if add together these 2 media queries current css, should work expect:

@media (max-width: 767px) { .navbar-inverse .navbar-collapse .navbar-form{ margin: 0; border: 0 none; } } @media (min-width: 768px) { .navbar-collapse.collapse { display: inline-block!important; float: left; } .navbar-form { padding-top: 10px; } }

however, suggest cleaning markup little because there quite few unneeded divs , it's bit hard read (you still need add together additional media-queries above css):

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <!-- brand , toggle grouped improve mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#nav-collapse"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target="#search-collapse"> <span class="sr-only">toggle navigation</span> <span class="glyphicon glyphicon-search"></span> </button> <a class="navbar-brand" href="#"><img src="img/gg_logo1.png" alt="logo 1" id="logo 2"><img src="img/gg_logo2.png" alt="gamingglitch" id="logo2"></a> </div> <!-- collect nav links, forms, , other content toggling --> <div class="navbar-collapse collapse" id="nav-collapse"> <ul class="nav navbar-nav"> <li> <a href="#">link 1</a> </li> <li> <a href="#">link 2</a> </li> <li> <a href="#">link 3</a> </li> <li> <a href="#">link 4</a> </li> </ul> </div> <div class="navbar-collapse collapse" id="search-collapse"> <form class="navbar-form" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="search"> </div> </form> </div> </div> </nav>

if utilize new markup proposed, add together rule:

.navbar-toggle.pull-left { margin-left: 15px; }

lastly, in css rule .navbar-inverse .navbar-toggle, can remove float:left , have border: 0 1px 0 0 solid #cccccc, not valid, doesn't anything. if meant wanted, 0-top, 1px-right, 0-bottom, , 0-left border, must separate them:

border-top: 0 none; border-right: 1px solid #cccccc; border-bottom: 0 none; border-left: 0 none;

css3 responsive-design twitter-bootstrap-3