Estoy teniendo problemas a la hora de agregar un dropdown a mi navbar en bootstrap 5; este es mi navbar:
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container-fluid">
<a class="navbar-brand" id="navbar-app-name" href="#">Inicio</a>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0" id="navbar-list-ul">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</nav>
Y para el dropdown, debido a que cuando le daba click la página se hacía más grande, decidí agregarle estos estilos css para evitar eso:
#navbar-list-ul
{
margin-right: 60px;
}
Hasta ahí todo va bien, pero si hago la página mas pequeña, simulando un teléfono, al darle click al navbar el navbar se "deforma" por llamarlo de alguna forma, haciendo el navbar verse de esta forma:
¿Cómo evitar que el navbar se vea como la imagen anteriormente agregada, y que se vea un poco más como el navbar de laravel5 (por dar algún ejemplo)?