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
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg bg-light container sticky-top" style="height: 8vh;">
<a class="navbar-brand" href="#"><img src="https://d1yjjnpx0p53s8.cloudfront.net/styles/logo-thumbnail/s3/092015/vitaldent.png?itok=wP8_B1Lc" 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>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<img width="100%" src="https://cdn.pixabay.com/photo/2018/04/30/08/08/business-3362081_1280.jpg" alt="" />
</div>
</div>
</div>