navbar collapse without socialmedia items - html

Question

I have navigation bar that collapses on windows resize. Besides the usual stuff in nav bar like about, contact...etc, i have two social media links (facebook and twitter). After i resize window, both of the social media items jump to the right of collapsed bar and also show up in the "dropdown" of the collapsed bar.
I would like for the social media items to show on the left of the so called dropdown button and for them to not show up in the collapsed bar.
I've tried this by sourcing them outside of collapsed bar div, but nothing changes.
Any help?
<nav class="navbar navbar-expand-lg navbar fixed-top navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#"><img src="img/logo.png" width="100" height="100" class="d-inline-block align-top" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarForCollapse" aria-controls="navbarForCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarForCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Our team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
<div class="navbar-social">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
</div>
</div>
</nav>
For visual:
https://jsfiddle.net/8ay2g0tL/3/
Thank you!
RESULT
im not sure if this is the best practice or not, but the way i finally was able to hide it from collapsed navbar is by setting it to display: none
like this:
#media only screen and (max-width: 998px) {
#navbarfbtw{
display:none;
}
}

Answer 1

Just wrap the class="navbar-social" inside the parent class="collapse navbar-collapse", Also there is no reason to use <div class="navbar-social"> so just add social li items (with navbar-social class) in the parent ul element like this:
Updated JsFiddle
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<nav class="navbar navbar-expand-lg navbar fixed-top navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#"><img src="img/logo.png" width="100" height="100" class="d-inline-block align-top" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarForCollapse" aria-controls="navbarForCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarForCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Our team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item navbar-social">
</li>
<li class="nav-item navbar-social">
</li>
</ul>
</div>
</div>
</nav>

Answer 2

It's to do with the order in which the elements are rendered on the page.
The collapsed menu is being "un-hidden" and shunting your icons out of place.
Simply put the "navbar-social" div BEFORE the "navbarForCollapse" div.
https://jsfiddle.net/16x8jhu4/9/
<div class="navbar-social">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarForCollapse" aria-controls="navbarForCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarForCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Our team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>