Looking for help with creating a navbar for a website using HTML and Bootstrap. Need to move the header and link to the ends of the navbar and ensure that the hamburger button displays correctly on different screen sizes.
Here's how it looks on desktop : Screenshot of the page on desktop
And here's how it appears on mobile and tablets : Enter image description here
Any assistance would be greatly appreciated!
Current code snippet with Bootstrap CSS files linked in the head tag and the script tag before the /body tag.
<div class="container">
<nav class="navbar navbar-expand-lg">
<div class="container">
<header
class="d-flex flex-wrap justify-content-center align-items-center py-3">
<h2>
<a href="/" class="text-decoration-none link-dark">CAFÉ - 82</a>
</h2>
</header>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-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 pb-2">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</div>