My Bootstrap 4 navbar includes items on both the left and right sides. Take a look at the full version below:
https://i.sstatic.net/zqxzI.jpg
And this is how it appears when collapsed.
https://i.sstatic.net/UmvK0.jpg
My goal is to have the Sign Up button aligned with the collapse toggle button on the right side. Is this achievable, and if so, how can it be done?
Here is the relevant snippet of the code:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler ml-lg-5 ml-md-5 ml-sm-5" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav ml-lg-5 ml-md-5 ml-sm-5">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
</ul>
</div>
<button class="btn btn-outline-custom mr-lg-5 mr-md-5 mr-sm-5" type="submit" data-toggle="modal" data-target="#signupModal">SIGN UP</button>
</nav>