How to prevent bootstrap 3 (3.3.1) navbar-form going into separate line on mobile interface

Question

I am using a fixed navbar which works fine on desktop browsers but when the navbar collapses the search goes into two lines (http://www.employees.org/~vivek/how_it_looks.png) . How do I make sure that search form. stays on the top even after the menu collapses - something similar to yelp mobile interface (http://www.employees.org/~vivek/yelp_look.png)

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
      <form class="navbar-form navbar-header">
        <input type="text" class="form-control" placeholder="... ">
      </form>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a>
        </li>
        <li><a href="#about">About</a>
        </li>
        <li><a href="#contact">Contact</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a>
            </li>
            <li><a href="#">Another action</a>
            </li>
            <li><a href="#">Something else here</a>
            </li>
            <li class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a>
            </li>
            <li><a href="#">One more separated link</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</nav>

Answer 1

The .navbar-form intention when you look at the source CSS for Bootstrap is to be used inside the collapse. And .navbar-header is also a class that clears and shouldn't be nested. So change the class from navbar-form navbar-header to navbar-left navbar-search for example.

Then you need to write some CSS to adjust the contents for a custom implementation. If you add stuff or change it around this CSS may not work.

Adjust the 400px in the second media query to something lower if you wish.

DEMO: https://jsbin.com/sudide/1/

DIFFERENT HTML:

  <form class="navbar-left navbar-search">
    <input type="text" class="form-control" placeholder="... ">
  </form>

CSS

@media (min-width:0px) and (max-width:767px) { 
    .navbar {
        display: table;
        width: 100%;
    }
    .navbar-brand,
    .navbar-search,
    .navbar-toggle { display: table-cell }
    .navbar-search {
        padding: 7.5px 10px 0 0;
        width: 1%;
    }
}
@media (max-width:400px) { 
    .navbar-search {
        padding: 7.5px 15px;
        float: left;
        clear: both;
        width: 100%;
    }
}
@media (min-width:768px) { 
    .navbar-search {
        float: left;
        margin: 7.5px 0;
    }
}