title: Bootstrap 3 search bar
body: <p>Hi I'm trying to include a search bar in a standard bootstrap 3 template. I'm trying to implement it in such a way that when the menu collapses at a smaller resolution the search bar stays in the navigation bar and the rest of the menu buttons collapse. I got it working perfectly on desktop resolution but when I switch to the mobile resolution the search bar shows up underneath my title and nav button. This is the HTML I'm using at the moment.</p>
  
  <pre><code>&lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
    &lt;div class="container"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;a class="navbar-brand" href="#"&gt;My Project&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-3 col-md-3 navbar-right"&gt;
        &lt;form class="navbar-form" role="search"&gt;
          &lt;div class="input-group"&gt;
            &lt;input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"&gt;
            &lt;div class="input-group-btn"&gt;
              &lt;button class="btn btn-default" type="submit"&gt;&lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
      &lt;div class="navbar-collapse collapse"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#about"&gt;Browse Courses&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#contact"&gt;Active Courses&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#contact"&gt;Shopping Cart&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#contact"&gt;Recently Viewed&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;&lt;!--/.navbar-collapse --&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I make sure the searchbar doesn't disappear or show up as a second row when the menu collapses? Many thanks</p>