I've been attempting to center a Bootstrap 5 navbar, but so far I haven't had any luck. My goal is to have both the logo and links centered, but when the screen size is too small, the navbar still collapses using the toggler. Here is the code I'm working with:
<nav class="navbar navbar-light navbar-expand-md justify-content-center">
<div class="container-fluid"><a class="navbar-brand" href="#">Brand</a><button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div id="navcol-1" class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" href="#">First Item</a></li>
<li class="nav-item"><a class="nav-link" href="#">Second Item</a></li>
<li class="nav-item"><a class="nav-link" href="#">Third Item</a></li>
</ul>
</div>
</div>
</nav>
While following tutorials such as this one: https://www.youtube.com/watch?v=1quNxUhmZNQ, I believe there must be a simpler solution that I'm just not seeing at the moment. Any assistance would be greatly appreciated.