title: Bootstrap navbar search button
body: <p>I am trying to implement search menu on navbar in following way.
  There is two design, which is one fore screen &lt; 767px and another one above 767px.</p>
  
  <p>Basically, I am able to expand the search bar but the position of the expanded search bar is not display correctly.</p>
  
  <p><a href="https://i.stack.imgur.com/HKP0m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HKP0m.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function(){
     $("#search-button, #search-icon").click(function(e){
       e.preventDefault();
       $("#search-button, #search-form").toggle();
     });
   })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#search-form { display: none; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /&gt;
  
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Fixed navbar --&gt;
  &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
    &lt;div class="container"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&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;Project name&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="navbar" class="navbar-collapse collapse"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li class="active"&gt;&lt;a href="#"&gt;Menu 1&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#contact"&gt;Menu 2&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li&gt;          
         &lt;form role="search"&gt;
          &lt;button id='search-button' class='btn btn-default '&gt;&lt;span class='fa fa-search'&gt;&lt;/span&gt;&lt;/button&gt;
          &lt;div id='search-form' class="form-group"&gt;
            &lt;div class="input-group"&gt;
              &lt;span id='search-icon' class="input-group-addon"&gt;&lt;span class='fa fa-search'&gt;&lt;/span&gt;&lt;/span&gt;
              &lt;input type="text" class="form-control" placeholder="Search"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/form&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Log In &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;!--/.nav-collapse --&gt;
    &lt;/div&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>