title: Responsive navbar with left brand, centre search form and left dropdown
body: <p>I am very close on this one!!  I have taken the stock BS navbar and customized it.  I am looking for a simple nabber with a search field centred in it.</p>
  
  <p>Here is my code: <a href="http://www.bootply.com/dxTjFzpv4K" rel="nofollow">http://www.bootply.com/dxTjFzpv4K</a></p>
  
  <pre><code>&lt;nav class="navbar navbar-default navbar-inverse"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt; &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&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;Brand Text&lt;/a&gt;
          &lt;/div&gt;
          &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
          &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
              &lt;ul class="nav navbar-nav navbar-search"&gt;
                  &lt;form class="navbar-form" role="search"&gt;
                      &lt;div class="input-group"&gt;
                          &lt;input type="text" class="form-control" placeholder="Search" contenteditable="false"&gt;
                          &lt;div class="input-group-btn"&gt;
                              &lt;button type="button" class="btn btn-default"&gt;Search&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/ul&gt;
              &lt;ul class="nav navbar-nav navbar-right"&gt;
                  &lt;li&gt;&lt;a href="#" class=""&gt;Link&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="dropdown"&gt;   &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt; Dropdown &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                      &lt;ul class="dropdown-menu" role="menu"&gt;
                          &lt;li&gt;&lt;a href="#" class=""&gt;Menu Item 1&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#" class=""&gt;Menu Item 2&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#" class=""&gt;Menu Item 3&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#" class=""&gt;Menu Item 4&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>and my custom CSS:</p>
  
  <pre><code>.navbar-search
  {
      position: absolute;
      width: 100%;
      left: 0;
      text-align: center;
      margin: auto;
  }
  </code></pre>
  
  <p>that I found from another example here: <a href="http://www.bootply.com/98314" rel="nofollow">http://www.bootply.com/98314</a></p>
  
  <p>I renders properly but when you switch to the responsive mode the search field overlaps the collapsed menu items.</p>
  
  <p>As a bonus question - can I make the search field wider?  I have tried a few CSS tricks and wrapping it in a BS table and specifing a column width but nothing that works so far.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>That answer worked now it's broken again.  The field spans 100% and overlaps everything.  The funny thing is that the formatting looks great on the responsive mode just not the desktop.</p>
  
  <p>Here is the computed navbar-search class CSS:</p>
  
  <pre><code>box-sizing: border-box;
  color: rgb(51, 51, 51);
  display: block;
  float: none;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  height: 50px;
  left: 0px;
  line-height: 20px;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  padding-left: 0px;
  position: absolute;
  text-align: center;
  width: 1636px
  </code></pre>