Bootstrap Navigation Bar Collapse - html

Question

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.
Half Screen: http://imgur.com/8692UFO
Small Screen: http://imgur.com/MIrRvNH
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.
My HTML:
<!-- NAVIGATION BAR -->
<div class="navbar navbar-default navbar-static-top navbar-inverse">
<div class="container">
<!-- HOME BRAND -->
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="./newnewfoy.png">
</a>
</div>
<!-- NAV LINKS -->
<ul class="nav navbar-nav navbar-collapse collapse">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Event</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Volunteer</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Sponsors</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Contact</a>
</li>
</ul>
<!-- NAV MEDIA -->
<div class="nav navbar-collapse collapse medialinks hidden-xs">
<a id="YOUcon" class = "mediacon" href="#"></a>
<a id="IGcon" class = "mediacon" href="#"></a>
<a id="TWTcon" class = "mediacon" href="#"></a>
<a id="FBcon" class="mediacon" href="#"></a>
</div>
</div>
</div>
CSS:
.nav{
height: 50px;
}
.mediacon{
float: right;
}
.medialinks{
float: right;
}
.navbar-brand{
padding-top: 7px;
}

Answer 1

You have to add a button into the navbar header to open and close the navbar.
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
I created a working fiddle https://jsfiddle.net/x32tf96L/
HTML
<div class="container-fluid">
<!-- HOME BRAND -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="./newnewfoy.png">
</a>
</div>
<!-- NAV LINKS -->
<ul class="navbar-collapse collapse" id="myNavbar">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Event</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Volunteer</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Sponsors</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Contact</a>
</li>
</ul>
<!-- NAV MEDIA -->
<div class="nav navbar-collapse collapse medialinks hidden-xs">
<a id="YOUcon" class = "mediacon" href="#"></a>
<a id="IGcon" class = "mediacon" href="#"></a>
<a id="TWTcon" class = "mediacon" href="#"></a>
<a id="FBcon" class="mediacon" href="#"></a>
</div>
</div>
CSS is the same.

Answer 2

I solved it.
Solution:
<div class="container">
<!-- BRAND, BUTTON -->
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="./newnewfoy.png">
</a>
</div>
<!-- NAV LINKS -->
<div>
<ul class="nav navbar-collapse collapse navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Event</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Volunteer</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Sponsors</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Contact</a>
</li>
</ul>
<div class="medialinks hidden-sm">
<a id="YOUcon" class = "mediacon" href="www.google.com"></a>
<a id="IGcon" class = "mediacon" href="www.google.com"></a>
<a id="TWTcon" class = "mediacon" href="www.google.com"></a>
<a id="FBcon" class="mediacon" href="www.google.com"></a>
</div>
</div>
</div>