Is there a way to fix the issue where the dropdown menu appears in the body of the navbar when it is collapsed? I have tried using attributes like data-bs-reference but couldn't find much information on how to resolve this.
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-md">
<a class="navbar-brand" href="#"><img src="news-logo.png" width="100px"></a>
<button class="navbar-toggler order-first" data-bs-toggle="collapse" data-bs-target="#mynavbar"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse order-last order-md-1" id="mynavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">items...</a>
</li>
</ul>
</div>
<ul class="navbar-nav order-md-2 ">
<li class="nav-item dropdown ms-md-auto">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">User</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Account</a></li>
<li><a class="dropdown-item" href="#">Contact</a></li>
</ul>
</li>
</ul>
</div>
</nav>