title: Bootstrap Navigation Bar Collapse
body: <p>I'm currently using bootstrap's navigation bar in order to collapse elements when the screen gets small. There are two divs that should collapse when the screen gets smaller, but before they collapse, the elements stack on each other.</p>
  
  <p>Half Screen: <a href="https://imgur.com/8692UFO" rel="nofollow noreferrer">http://imgur.com/8692UFO</a></p>
  
  <p>Small Screen: <a href="https://imgur.com/MIrRvNH" rel="nofollow noreferrer">http://imgur.com/MIrRvNH</a></p>
  
  <p>What I'd like to do here is to collapse the social media icons on the right before the navigation links at half-screen, but using bootstrap's "hidden-sm" doesn't seem to work. I'm pretty new at bootstrap and would like some advice on how to fix this.</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;!-- NAVIGATION BAR --&gt;
  &lt;div class="navbar navbar-default navbar-static-top navbar-inverse"&gt;
  
    &lt;div class="container"&gt;
  
      &lt;!-- HOME BRAND --&gt;
      &lt;div class="navbar-header"&gt;
        &lt;a class="navbar-brand" href="#"&gt;
          &lt;img src="./newnewfoy.png"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
  
      &lt;!-- NAV LINKS --&gt;
      &lt;ul class="nav navbar-nav navbar-collapse collapse"&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link active" href="#"&gt;Home&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;About&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;Event&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link disabled" href="#"&gt;Volunteer&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link disabled" href="#"&gt;Sponsors&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link disabled" href="#"&gt;Contact&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;!-- NAV MEDIA --&gt;
      &lt;div class="nav navbar-collapse collapse medialinks hidden-xs"&gt;
        &lt;a id="YOUcon" class = "mediacon" href="#"&gt;&lt;/a&gt;
        &lt;a id="IGcon" class = "mediacon" href="#"&gt;&lt;/a&gt;
        &lt;a id="TWTcon" class = "mediacon" href="#"&gt;&lt;/a&gt;
        &lt;a id="FBcon"  class="mediacon" href="#"&gt;&lt;/a&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.nav{
    height: 50px;
  }
  
  .mediacon{
    float: right;
  }
  
  .medialinks{
    float: right;
  }
  
  .navbar-brand{
    padding-top: 7px;
  }
  </code></pre>