0

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>

6
  • Hola y bienvenido a Stack Overflow. Las preguntas sin código no son bien recibidas por la comunidad. Muéstranos qué has intentado. Pásate por esta sección para que aprendas como realizar una pregunta y evitar que te la cierren.
    – DjCrazy
    Commented el 28 ene. 2020 a las 22:50
  • Se me ocurre que al momento de mostrar el menú cresca tu div para que ocupe el espacio requerido y así tu imagen se recorra ! Commented el 28 ene. 2020 a las 23:11
  • No se puede inferir muy bien porque no está el código (si puedes ponerlo, se agradecería), pero necesito preguntarlo: ¿Tu barra de navegación está fija? (o sea, si ella tiene la clase navbar-fixed-top en BS3, o fixed-top en BS4) Commented el 29 ene. 2020 a las 12:12
  • Siento lo del codigo, no me di cuenta ;( Commented el 29 ene. 2020 a las 21:15
  • tal vez esto te ayude un poco styde.net/…
    – Micky
    Commented el 30 ene. 2020 a las 3:10

2 respuestas 2

2

si estas usando Boostrap deberias usar collapsepara mostrar contenido oculto en forma de acordeón (esto desplaza los divs hacia abajo, que es lo que quieres hacer), es fácil de usar y de configurar, por ejemplo:

<button data-toggle="collapse" data-target="#demo">Mostarar/Ocultar</button>

<div id="demo" class="collapse">
 Algún Texto
</div>

Toda la documentacion la encuentras directamente el la documentacion de boostrap, ahi mismo hay muchos ejemplos: https://getbootstrap.com/docs/4.0/components/collapse/

0

como previamente te han comentado puedes usar un evento collapse en bootstrap. Yo intenté otra forma combinando bootstrap y estilos basándome en el proyecto siguiente: https://codepen.io/ncerminara/pen/hmade/ cantado sería de la siguiente manera, tienes que agregar las clases, a prestar atención:

.push-wrap {
    -webkit-transition: all 300ms ease 0ms;
    -moz-transition: all 300ms ease 0ms;
    -o-transition: all 300ms ease 0ms;
    transition: all 300ms ease 0ms;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.show-nav .push-wrap {
    -webkit-transform: translate(0, 240px);
    -moz-transform: translate(0, 240px);
    -ms-transform: translate(0, 240px);
    -o-transform: translate(0, 240px);
    transform: translate(0, 240px);
    -webkit-transform: translate3d(0, 240px, 0);
    -moz-transform: translate3d(0, 240px, 0);
    -ms-transform: translate3d(0, 240px, 0);
    -o-transform: translate3d(0, 240px, 0);
    transform: translate3d(0, 240px, 0);
}

El evento:

$(function() {
  $('.toggle-nav').click(function() {
    $('body').toggleClass('show-nav');
     return false;
  });

});


// Toggle with hitting of ESC
$(document).keyup(function(e) {
    if (e.keyCode == 27) {
   $('body').toggleClass('show-nav');
  }
});

Siguiendo mi forma obtendríamos un resultado parecido al tuyo.

// Normal Clicks
$(function() {
  $('.toggle-nav').click(function() {
    $('body').toggleClass('show-nav');
     return false;
  });
  
});


// Toggle with hitting of ESC
$(document).keyup(function(e) {
	if (e.keyCode == 27) {
   $('body').toggleClass('show-nav');
  }
});
nav {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
.site-wrap {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.push-wrap {
    -webkit-transition: all 300ms ease 0ms;
    -moz-transition: all 300ms ease 0ms;
    -o-transition: all 300ms ease 0ms;
    transition: all 300ms ease 0ms;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.show-nav .push-wrap {
    -webkit-transform: translate(0, 240px);
    -moz-transform: translate(0, 240px);
    -ms-transform: translate(0, 240px);
    -o-transform: translate(0, 240px);
    transform: translate(0, 240px);
    -webkit-transform: translate3d(0, 240px, 0);
    -moz-transform: translate3d(0, 240px, 0);
    -ms-transform: translate3d(0, 240px, 0);
    -o-transform: translate3d(0, 240px, 0);
    transform: translate3d(0, 240px, 0);
}

a {
  transition: all 300ms ease;
}
nav {
  background: white;
  text-align: center;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li a {
  display: block;
  text-decoration: none !important;
  height: 60px;
  line-height: 60px;
  font-size: 18px;
  color: #000;
}

article {
  position: relative;
  min-height: 1500px;
  background: white;
  z-index: 9;
  width: 100%;
}
article h1 {
  text-align: center;
  margin: 40px 0 30px;
}
article p {
  font-size: 20px;
  line-height: 30px;
  margin-bottom: 40px;
}
article a.toggle-nav {
  position: absolute;
    font-size: 25px;
    color: rgb(68, 71, 87);
    top: 0;
    right: 0;
    background: #fff;
    width: 60px;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

i {
  color: gray;
}
<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"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="site-wrap">
  <nav class=" bg-light container-fluid sticky-top">
    <ul>
      <li><a href="#">¿Quiénes somos?</a></li>
      <li><a href="#">¿Dónde estamos?</a></li>
      <li><a href="#">Tratamiento</a></li>
      <li><a href="#">Previa cita</a></li>
    </ul>
  </nav>
  <div class="push-wrap">
    <article>
      <nav class="navbar navbar-light bg-light">
        <a class="navbar-brand" href="#">VITALDENT</a>
        <a href="#" class="toggle-nav">
          <i class="fa fa-bars"></i>
        </a>
      </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>
    </article>
  </div>
</div>

Espero haber sido de ayuda.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.