When collapsing the screen, I encountered an issue with the dropdown items being inside the navbar. I positioned the dropdown menu as absolute, but some items were getting cut off, and I didn't want the scroll bar to appear. Despite trying to use media queries to adjust the position, I couldn't get it to change effectively.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark py-0 ">
<a class="navbar-brand py-0" href="#">Navbar</a>
<ul class="ml-auto navbar-nav ml-auto">
<li class="mt-auto mb-auto nav-item active py-0 d-none d-xl-block d-lg-block ">
<a class="nav-link " href="#">Hi, username <span class="sr-only">(current)</span></a>
</li>
<li class="mt-auto mb-auto nav-item dropdown py-0">
<a class="nav-link dropdown-toggle py-0" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<button class="btn btn-primary btn-sm" type="submit"><img src="images/space_stars_blue_free_wallpaper.jpg"
class="img-fluid rounded-circle " alt="..." width="45" height="45"></button>
</a>
<div id="test1" class="dropdown-menu dropdown-menu-right position-absolute" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</nav>