My Navbar is collapsing correctly, but when I click the toggle icon after it's collapsed, the items appear in a horizontal row instead of the intended vertical block. I have checked the code on the Bootstrap 5 example page and tried to replicate it, but my Navbar still doesn't work as intended (it should show a vertical dropdown when collapsed).
<div class="nav navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarToggler">
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link" href="/link1">Link 1</a></li>
<li class="nav-item"><a class="nav-link" href="/link2">Link 2</a></li>
<li class="nav-item"><a class="nav-link" href="/link3">Link 3</a></li>
</ul>
</div>
</div>
</div>
What am I missing? When I collapse the menu, the items should be vertically stacked on the right-hand side where the toggle icon is located. https://i.sstatic.net/vZwb2.png
I have attempted the solution mentioned here, but it always stacks the items vertically, not just on collapse.
EDIT - I have updated the code to show actual HTML instead of Pug code and simplified it by removing non-essential elements. No additional CSS has been applied; it simply uses the Bootstrap default settings.