I have a button labeled "MENU" at the top and a logo image below it. Currently, the menu expands from the bottom of the button. I would like it to expand from the top instead, and when the menu is expanded, the button should be under the navigation list, not above it.
Below is the code snippet:
<header>
<div>
<nav class="navbar bg-lightt navbar-expand-xlg">
<div class="mx-auto">
<button class="navbar-toggler collapsed" data-bs-toggle="collapse" data-bs-target="#navbar">
<span>MENU</span>
</button>
</div>
<div class="navbar navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav mx-auto">
<li class="nav-link"><a href="#" class="nav-link">Projects</a></li>
<li class="nav-link"><a href="#" class="nav-link">About</a></li>
<li class="nav-link"><a href="#" class="nav-link">Contact</a></li>
</ul>
</div>
</nav>
<div class="logo">
<a class="navbar-brand" href="#">
<img src="img/LOGO.png" class="logo" alt="">
</a>
</div>
</div>
</header>