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

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

<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>

<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>

Navbar en bootstrap

<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>

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

<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>

añadida la respuesta de ID 325446 como contenido suplementario
Origen Enlace
Jorgesys
  • 111.1k
  • 14
  • 55
  • 134

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

<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>

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

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

<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>
Se da formato para mejorar la visualización.
Origen Enlace
DjCrazy
  • 7.1k
  • 3
  • 18
  • 42

He hecho un navbar reponsivenavbar reponsive con bootstrapbootstrap sencillo, el cual, al no entrar todos los nav-linksnav-links en la pantalla se crea un menumenú desplegable. 

Vale hasta ahiahí todo bien. El problema es que a la hora de usar el menumenú, este se despliega encima de mi headerheader en vez de mandarlo para debajo, es decir, los nav-linksnav-links se despliegan encima de la foto del headerheader. 

Lo que quiero es que la imagen se mueva hacia abajo cuando se despliegedespliegue el menumenú.

Este es el fallo

He hecho un navbar reponsive con bootstrap sencillo el cual al no entrar todos los nav-links en la pantalla se crea un menu desplegable. Vale hasta ahi todo bien. El problema es que a la hora de usar el menu, 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 despliege el menuEste es el fallo

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

Origen Enlace
Loading