title: Bootstrap - using two navbars
body: <p>I am using twitter bootstrap 3 and I am trying to use two navbars in the same page.</p>
  
  <p>Here is a fiddle of my current implementation: <a href="http://jsfiddle.net/SSJVegito/30x80qq8/1/" rel="nofollow">http://jsfiddle.net/SSJVegito/30x80qq8/1/</a> </p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.navbar-position {
  position: relative;}
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>  &lt;div class="container"&gt;
      &lt;div class="navbar navbar-inverse navbar-fixed-top navbar-position" role="navigation"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;div class="navbar-header"&gt;&lt;a class="navbar-brand" href="#"&gt;Brand&lt;/a&gt;
              &lt;/div&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&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;/div&gt;
          &lt;div class="collapse navbar-collapse"&gt;
              &lt;ul class="nav navbar-nav pull-right"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
  
                      &lt;ul class="dropdown-menu"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="divider"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="divider"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="navbar navbar-inverse navbar-static-top" role="navigation"&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="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;/div&gt;
          &lt;div class="collapse navbar-collapse"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
  
                      &lt;ul class="dropdown-menu"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="divider"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="divider"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
              &lt;button type="button" class="btn btn-default navbar-btn"&gt;Button&lt;/button&gt;
              &lt;div class="col-sm-3 col-md-3 pull-right"&gt;
                  &lt;div class="navbar-text"&gt;Text&lt;/div&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;i class="glyphicon glyphicon-search"&gt;&lt;/i&gt;
                              &lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>The problem I have is that I want to use a relative positioning as presented in the fiddle, but when I try this, it adds a spacing between the two navbars, which I don't want. I want them to be one after the other. I've searched quite a bit, but I couldn't find an answer. The closest thing I found was a solution with two navbars separated by a div.</p>
  
  <p>Thanks!</p>