Skip to main content
4 de 4
Mejora de título
Ruslan López
  • 11.8k
  • 14
  • 44
  • 88

Navbar en bootstrap, mover hacia abajo cuando se despliegue el menú

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 es el fallo


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>