Just a heads up, I'm pretty new to Bootstrap so bear with me. I tried creating a responsive menu with Bootstrap 4 and it seemed simple at first. However, I encountered an issue with my navbar when resized. Here's how it looks initially:
https://i.sstatic.net/xaFNp.jpg
But when I resize it, this is what happens:
https://i.sstatic.net/K2sd7.jpg
And then, upon clicking the dropdown menu, it turns into this:
https://i.sstatic.net/akUEy.jpg
I want the button to remain on the right side without being drawn into the menu. It's really confusing why this is occurring. Here's the code snippet I used:
<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>Your assistance is greatly appreciated!