title: Bootstrap 4 navbar-toggler with separate navbar links
body: <p>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. </p>
  
  <p>Like this:</p>
  
  <p><a href="https://i.stack.imgur.com/Y4G5P.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y4G5P.jpg" alt="enter image description here"></a></p>
  
  <p>The thing is, no matter what I do, those right links refuse to stay inlined and my navbar goes into two rows.</p>
  
  <p>Here's the basic outline of the code I've been working with. What am I doing wrong?</p>
  
  <pre><code>&lt;nav class="navbar navbar-inverse fixed-top bg-inverse"&gt;
        &lt;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"&gt;
          &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;a class="navbar-brand" href="#"&gt;Brand&lt;/a&gt;
        &lt;div class="collapse navbar-collapse" id="navbarCollapse"&gt;
          &lt;ul class="navbar-nav mr-auto"&gt;
            &lt;li class="nav-item active"&gt;
              &lt;a class="nav-link" href="#"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="#"&gt;Link&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="#"&gt;Link&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
    &lt;div class="float-right"&gt;
      &lt;a&gt;Link&lt;/a&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Someone, please help! Thank you!</p>