Recently, I've been experimenting with Bootstrap for the first time and trying to understand its functionalities. While I've managed to make some progress with navbars, I've encountered a roadblock when it comes to the navbar-toggler.
<nav class="nav navbar-expand-sm navbar-dark">
<a class="navbar-brand" href="" id="homeOverride"> <span class="overrideFonts"> Home </span> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href=""> <span class="overrideFonts"> Projects </span> </a>
</li>
<li class="nav-item">
<a class="nav-link" href=""> <span class="overrideFonts"> Contact </span> </a>
</li>
</ul>
</div>
</nav>
Despite my efforts, whenever the page hits that sm breakpoint, the navbar-toggler remains stuck next to the navbar-brand link element, seeming aligned to the left. I've attempted various solutions but nothing overrides this behavior. My goal is to ensure that when the page hits the breakpoint and the list items are collapsed, the navbar-toggler aligns to the right side of the page. Currently, it stubbornly stays on the left, defying all my attempts to modify its position.
I have tried adding the class "navbar-toggler-right" and using custom IDs to enforce 'float: right !important;',
All I hope to achieve is positioning that button on the right side of the page when the breakpoint is reached.