Responsive navbar pulls link into the dropdown menu

Question

First of all as a disclaimer I'm a complete newbie when it comes to Bootstrap. I thought making a responsive menu would be straightforward, but I'm running into a problem where I have created a responsive navbar using bootstrap 4 which appears as follows:

When this is resized, it now appears as follows:

But when I click on the drop down menu it appears as follows:

I would like the button to stay in its position on the right and not be pulled into the menu. Really confused as to why this is happening. The code for this is:

<nav class="navbar fixed-top navbar-light navbar-expand-lg navbar-template">

  <a class="navbar-brand" href="#">Brand</a>

  <button class="navbar-toggler order-first" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
                <span class="navbar-toggler-icon"></span>
            </button>

  <div class="collapse navbar-collapse ml-auto justify-content-end" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
    </ul>
  </div>
  <a class="btn btn-outline-info" href="#">Button</a>

</nav>

I appreciate the help!

Well I was hoping that I could learn from experts, perhaps such as yourself! — oort, Jul 09 '18 at 17:23
You can get quick answers here to your problem. But you need to explore the underlying mechanism of How things works in Resposive system and Bootstrap. So you know what was the problem and how it got fixed by the suggested answers. Good Luck!! — vendettamit, Jul 09 '18 at 17:28

score 2 · Accepted Answer · answered Jul 09 '18 at 17:26

Use the responsive order-* classes to make the navbar-collapse last on smaller screens..

<nav class="navbar fixed-top navbar-light navbar-expand-lg navbar-template">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler order-first" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse ml-auto justify-content-end order-last order-lg-0" id="navbarNavDropdown">
        <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
        </ul>
    </div>
    <a class="btn btn-outline-info" href="#">Button</a>
</nav>

https://www.codeply.com/go/orAvObN161

Bootstrap NavBar with left, center or right aligned items

Responsive navbar pulls link into the dropdown menu

1 Answers1