In my Bootstrap 4 project, I have created a navbar with the brand logo centered and navlinks on both sides. However, when the screen size is reduced to a small size, the toggler button appears at the center right after the brand logo. I want the toggler button to be on the right side of the screen instead.
Below is the code snippet I am using:
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">EDITION</a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
</div>
</nav>
I have attempted to use media queries to move the toggler button, but it doesn't seem to be working as expected:
@media (min-width: 576px) {
.navbar-toggler {
transform: translateX(50px) !important;
}
}