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!