I am trying to have 3 elements on a navbar. A left aligned brand, a right aligned group of links that collapse on mobile, and an additional button that is also right aligned like the links, but should not collapse with them.
To right align the button and links I wrapped them in ml-auto div. This works great on mobile (1st image), but on PC the button appears above the links (2nd image). I tried to add btn-group to the div which sort of works, but the button merges with links and it looks odd (3rd image).
How can I properly align these components horizontally?
Please note that I do not want the button to be in the same group with the other right links. I want the button to be always visible even on a small screen. I've seen a few similar questions on SO, but they all have the right aligned items in the same, collapsible group which is no good for me.
You can paste the code below to w3school TryIt editor
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">Home</a>
<div class="ml-auto">
<button class="btn btn-success">My Button</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto"/>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Right Link 1</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Right Link 2</a>
</li>
</ul>
</div>
</nav>