I am looking to achieve a design where my navbar brand is centered with the navigation links positioned on the left and right of it. When the screen size reaches md, I want the nav links to disappear into a burger menu while still keeping the nav brand visible at the top center.
<nav class="navbar navbar-expand-md bg-dark navbar-dark py-3">
<div class="container">
<div class="navbar-brand"><h2>Name</h2></div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#burger"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="burger">
<ul class="navbar-nav mx-auto">
<li class="nav-item px-5">
<a href="#python" class="nav-link" style="color: white;"><h2>Python</h2></a>
</li>
<li class="nav-item px-5">
<a href="#html&css" class="nav-link" style="color: white;"><h2>Html&Css</h2></a>
</li>
</ul>
</div>
</div>
</nav>
This is the desired layout: Visual Reference