Bootstrap 4 navbar-toggler with separate navbar links - css

Question

I've been making a fixed navbar that needs to have a navbar-toggler visible on all devices( I removed navbar-toggleable-md class to achieve that). It needs to be on the left, with the navbar-brand before it, while another set of links(outside of the toggler) need to be on the right.
Like this:
The thing is, no matter what I do, those right links refuse to stay inlined and my navbar goes into two rows.
Here's the basic outline of the code I've been working with. What am I doing wrong?
<nav class="navbar navbar-inverse fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-left ml-5" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<div class="float-right">
<a>Link</a>
</div>
</nav>
Someone, please help! Thank you!

Answer 1

Change the navbar to flex-row. By default it's direction: column which will make the navbar elements stack vertically in 2 rows like you're seeing.
Also, put the extra link(s) after the Brand, and use ml-auto to push it to the right...
<nav class="navbar navbar-inverse fixed-top bg-inverse flex-row flex-wrap">
<button class="navbar-toggler navbar-toggler-left ml-5" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<div class="collapse navbar-collapse w-100" id="navbarCollapse">
<ul class="navbar-nav mr-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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
http://www.codeply.com/go/CUCeeElIcI