title: Two navbars same row make collapse not work. How to make right nav disappear?
body: <p>I'm trying to get my navbar to collapse correctly.  I have three links on the right that should disappear when my navbar collapses.  Instead, they overlay the links I want to appear upon collapse.  Any suggestions?</p>
  
  <p>Here is my code: </p>
  
  <pre><code>       &lt;div class="navbar navbar-default navbar-fixed-top" role="navigation"&gt;
           &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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;a href= "#" class="navbar-brand"&gt;XYZ&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="collapse navbar-collapse navbar-ex1-collapse"&gt;
          &lt;ul class="nav navbar-nav pull-left"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="index.html#/projects"&gt;Projects&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="index.html#/finance"&gt;Finance&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="index.html#/resume"&gt;Resume&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
  
         &lt;ul class="nav navbar-nav navbar-right"&gt;
            &lt;li&gt;&lt;a href="http://www.linkedin.com/in/XYZ" class="icon-large icon-linked-in"&gt;&lt;/a&gt; &lt;/li&gt;
            &lt;li&gt;&lt;a href="http://www.twitter.com/XYZ78" class="icon-large icon-twitter"&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="http://www.github.com/XYZ" class="icon-large icon-github"&gt;&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>####UPDATED CODE, but icons collapse on new row overlaying content #######</p>
  
  <pre><code>&lt;div class="navbar navbar-default navbar-fixed-top" role="navigation"&gt;
     &lt;div class="navbar-header"&gt;
       &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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;a href= "#" class="navbar-brand"&gt;&lt;a&gt;&lt;img src="img/lior.jpeg"&gt;&lt;/a&gt;
    &lt;/div&gt;
      &lt;div class="collapse navbar-collapse navbar-ex1-collapse"&gt;
        &lt;ul class="nav navbar-nav"&gt;
  
               &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="index.html#/projects"&gt;Projects&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="index.html#/finance"&gt;Finance&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="index.html#/resume"&gt;Resume&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
           &lt;div style="float:right"&gt;
            &lt;ul class="nav navbar-nav navbar-right hidden-xs hidden-md"&gt;
               &lt;li&gt;&lt;a href="http://www.linkedin.com/in/st" class="icon-large icon-linked-in"&gt;&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="http://www.twitter.com/s" class="icon-large icon-twitter"&gt;&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="http://www.github.com/s" class="icon-large icon-github"&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>