I'm currently customizing the Bootstrap 4 default navbar and I want to add a collapsing menu that is positioned on the right, instead of the left, when it's not collapsed.
So far, I have attempted to use text-right and float-right, but unfortunately, neither of them are actually shifting the menu to the right as desired.
If you need to see the issue in action, feel free to check out this Bootply link.
Additionally, here is a code snippet as requested by StackOverflow, though I'm unsure if it will be wide enough to display the non-collapsed menu correctly:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script>
<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-md">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</button>
<div class="collapse navbar-collapse float-right">
<ul class="nav navbar-nav">
<li class="active nav-item"><a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item"><a href="#about" class="nav-link">About</a>
</li>
<li class="nav-item"><a href="#contact" class="nav-link">Contact</a>
</li>
</ul>
</div>
</div>
</div>