title: Making a responsive navigation bar with a search button
body: <p>I am trying to make a responsive navigation bar using bootstrap. I want to build like <a href="http://wordpress.org/support/topic/want-to-move-search-option-from-header-to-navigation-bar" rel="nofollow">http://wordpress.org/support/topic/want-to-move-search-option-from-header-to-navigation-bar</a> .
  .</p>
  
  <p>But the search button don't go to the right and when collapsed the tabs split and move to the line below. At the place of Download Wordpress button I want LogIn and SignUp buttons. On collapsing the brand name, search button and the bars for opening the menu should be shown in same line.</p>
  
  <p>Can somebody please tell how to do it? <a href="http://jsfiddle.net/8hrnkbaL/" rel="nofollow">See my code</a></p>
  
  <p>
              </p>
  
  <pre><code>            &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"&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 Name&lt;/a&gt;
  
                  &lt;form class="navbar-form navbar-right" style="float: right;" role="search"&gt;
                      &lt;input type="text" class="form-control" placeholder="Search"&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
  
              &lt;div style="clear:both"&gt;&lt;/div&gt;
  
              &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
              &lt;div class="collapse navbar-collapse" id="navbar-collapse-1"&gt;
                  &lt;ul class="nav navbar-nav navbar-left"&gt;
                      &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Highlights&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Test Yourself&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Interesting Questions&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Ask Queries&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
  
                  &lt;ul class="nav navbar-nav navbar-right"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;SignUp&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;LogIn&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  
  .navbar {
      min-height: 120px;
  }
  
  .navbar .container {
      padding-top: 20px;
      padding-bottom: 20px;
  }
  
  .navbar-nav&gt;li&gt;a {
      text-transform: uppercase;
      font-family: "jokerman";
      font-size: 16px;
  }
  
  @media (min-width: 768px)   {
      .navbar-nav {
          margin: 0 auto;
          display: table;
          table-layout: fixed;
          float:  none;
      }
  }
  </code></pre>