Bootstrap 3 and CSS3 - Navbar search box placement error

Problem

I am having trouble with this navbar search box. After making two buttons, one for the Nav links and one for Search box, the search box did not line up next to the Nav links in desktop view. Its sit in a new line, under my logos. I can't seem to fix it. I tired few different methods, but it only made my main purpose of having a "pancake" on the left and a search icon on the right all messed up.

Here is my html code:

<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better 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 the nav links, forms, and other content for 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 is my 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 > a {
    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;
  }
Problem courtesy of: lllllllllllll

Solution

If you just add these two media queries to your current css, it should work as you 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, I suggest cleaning up the markup a little because there are quite a few unneeded divs and it's a bit hard to read (you still need to add the additional media-queries above to your css):

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better 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 the nav links, forms, and other content for 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 you use the new markup I proposed, also add this rule:

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

Lastly, in your css rule for the .navbar-inverse .navbar-toggle, you can remove the float:left and you have border: 0 1px 0 0 solid #cccccc, which is not valid, so it doesn't do anything. If you meant that you wanted, a 0-top, 1px-right, 0-bottom, and 0-left border, then you must separate them:

border-top: 0 none;
border-right: 1px solid #cccccc;
border-bottom: 0 none;
border-left: 0 none;
Solution courtesy of: jme11

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.