Bootstrap navbar not collapsing to pills at the right point - html

Question

I have a navbar with a couple of links on the left side and social media buttons on the right. The problem is that when i shrink the window, the links and buttons do not collapse into pills soon enough. Instead, the social media buttons from the right side go under the links on the left side. And then when the window is too narrow to fit the links, the pills appear.
How can I edit this so the navbar collapses at the right position?
Any help is much appreciated:)
Here is my code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<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="#">WebsiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul>
<ul class="nav navbar-nav navbar-right nav-pills social-icons icon-circle icon-rotate">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-twitter"></i></li>
</ul>
</div>
</div>
</nav>

Answer 1

Where you see 1000px, add your own width you want.
#media (max-width: 1000px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}

Answer 2

you can create a class that , according to from the screen size , determines the width or more of the navbar .
#media ( max-width : 767px ) {
.widthNavbar {
width : 700px;
}
}
or you can put the class is activated between two values ​​:
#media ( min-width : 768px ) and ( max-width : 979px ) {
.widthNavbar {
width : 700px;
}
}