He hecho un navbar reponsive
con bootstrap
sencillo, el cual, al no entrar todos los nav-links
en la pantalla se crea un menú desplegable.
Vale hasta ahí todo bien. El problema es que a la hora de usar el menú, este se despliega encima de mi header
en vez de mandarlo para debajo, es decir, los nav-links
se despliegan encima de la foto del header
.
Lo que quiero es que la imagen se mueva hacia abajo cuando se despliegue el menú.
Este seria el codigo de la imagen. Siento el despieste
<nav class="navbar navbar-expand-lg bg-light container sticky-top" style="height: 8vh;">
<a class="navbar-brand" href="#"><img src="./img/vitaldent-logo.png" alt="logo" style="width: 18vh;"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link ml-3" href="#"><h5 class="text-primary">Donde estamos</h5></a>
</li>
<li class="nav-item">
<a class="nav-link ml-3" href="#"><h5 class="text-primary">Cita previa</h5></a>
</li>
</ul>
</div>
</nav>