One issue I am facing is with a button (class="navbar-toggler") that collapses, which works fine. However, when I click on it, all the menu items (links) appear on the left-hand side and it looks awful!!!
I've tried various solutions to move the menu item links to the right, but nothing seems to work...
Is there anyone who can assist me in resolving this?
Below is the code snippet:
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Hello All</a>
<button class="navbar-toggler" data-toggle="collapse" datatarget="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<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>
</ul>
</div>
</div>
</nav>
Your help in this matter will be greatly appreciated!