title: bootstrap navbar collapsing social icons on top of one another
body: <p>I want a navbar that has a collapsible element on the right that holds my social media links and icons. Trouble is, the bootstrap navbar does not seem to be working: <a href="https://jsfiddle.net/44mbr237/1/" rel="nofollow">https://jsfiddle.net/44mbr237/1/</a></p>
  
  <p>When the browser window is collapsed, the social media icons and links pile up on top of the collapsed icon (on the right).</p>
  
  <p>html:</p>
  
  <pre><code>    &lt;nav class="navbar navbar-default"&gt;
    &lt;div class="container-fluid"&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;i class="fa fa-2x fa-comment"&gt;&lt;/i&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;i class="fa fa-2x fa-facebook"&gt;&lt;/i&gt;&lt;/span&gt;
         &lt;span class="icon-bar"&gt;&lt;i class="fa fa-2x fa-twitter"&gt;&lt;/i&gt; &lt;/span&gt;
        &lt;/button&gt;
        &lt;div class="navbar-brand"&gt;
            &lt;img alt="PG Logo" src="http://newsinteractive.post-gazette.com/hbcu/img/PGLogoTwitter_2_10_12_bigger.gif"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;h1 class="navbar-text"&gt;HEADER HERE&lt;/h1&gt;
  
      &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
  
  
        &lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li&gt;&lt;i class="fa fa-2x fa-comment"&gt;&lt;/i&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="https://www.facebook.com/sharer/sharer.php?u=http://newsinteractive.post-gazette.com/hbcu/" target="_blank"&gt;&lt;i class="fa fa-2x fa-facebook"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="https://twitter.com/hashtag/pgHBCU"&gt;&lt;strong&gt;#pgHBCU&lt;/strong&gt;&lt;/a&gt; &lt;/li&gt;
          &lt;li&gt;&lt;a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Fnewsinteractive.post-gazette.com%2Fhbcu%2F&amp;text=%23pgHBCU Pittsburgh high school students' perspectives on historically black colleges(via @PittsburghPG):&amp;:tw_p=tweetbutton&amp;url=http://newsinteractive.post-gazette.com/hbcu/" target="_blank"&gt; &lt;i class="fa fa-2x fa-twitter"&gt;&lt;/i&gt; &lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>    .navbar {
      height: 73px;
      margin-bottom: 0 !important;
      border: none 0 !important;
      background-color: black !important;
      color: white !important;
  }
  .navbar-brand {
      padding: 0 !important;
  }
  .navbar-brand img {
      border-right: 2px solid white;
  }
  .navbar-text {
      color: white !important;
      font-family: "Open Sans Condensed", sans-serif !important;
      font-weight: bold !important;
  }
  </code></pre>
  
  <p>Can someone tell me what I'm doing wrong, please?</p>