1.Add your social media icons after the <div class="collapse navbar-collapse">
in a div <div class="social-icons">
2.Add following javascript:
<script>
$(document).scroll(function() {
$("#navbar").toggleClass("tiny",$(document). scrollTop() > 50);
});
</script>
3.And in your css add:
.tiny .social-icons {
display: none;
}
and after you scolled 50 pixels down your social-icons will be invisible.