1

estoy diseñando mi pagina web, y le agregue un toggler con bootstrap al nav bar, luego de posicionarlo como yo queria, que es asi:

introducir la descripción de la imagen aquí

Al abrirlo, queda asi:

introducir el código aquí

No se porque sucede esto, el CSS para el posicionamiento es el siguiente:

@media(max-width:990px){
.button-margin{ /* Separacion entre los botones */
    margin-right:90px;
}
.navbar-light .navbar-toggler{ /* Posicionamiento absoluto del toggler */
    position: absolute;
    right: 20px;
}
#button-styles{ /* Posicionamiento de botones al lado del toggler */ 
    position: absolute;
    right: 110px;
}

}

Y aca adjunto el navbar:

<nav class="margenes navbar navbar-expand-lg navbar-light" style="background-color: #cfeafd;">
<a class="navbar-brand" href="#">Veterinaria</a>
<button class="toggler navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
  aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="margen-down navbar-nav me-auto mb-2 mb-lg-0">
    <li class="nav-item">
      <a class="nav-link active white" aria-current="page" href="#">Inicio</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Veterinari@s</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Dueñ@s</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Adopta</a>
    </li>
    <div class="separador"></div>
  </ul>
</div>

¿Como puedo hacer que al presionar el toggler, los botones queden en la parte de encima, es decir, no se muevan?

Muchas gracias

1 respuesta 1

4

Si quieres todos los botones a la derecha puedes envuélvalos en un div. El nav tiene justify-content: space-between. Entonces cuando usas el div, el nav tiene dos elementos. No cuatro. Y los elementos en el div van a irán a la derecha.

Actualización: agregué algunos css para los botones. Ahora los botones se quedan arriba a la derecha.

 .btnWrapper {
   display: flex;
   position: absolute;
   right: 0;
   top: 10px;
 }

 @media(max-width:990px) {
  .button-margin {
    /* Separacion entre los botones */
    margin-right: 90px;
  }
  .navbar-light .navbar-toggler {
    /* Posicionamiento absoluto del toggler 
*/
    margin-right: 20px;
  }
  #button-styles {
    /* Posicionamiento de botones al lado del toggler */
    position: absolute;
    right: 110px;
  }
}
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

<nav class="margenes navbar navbar-expand-lg navbar-light" style="background-color: #cfeafd;">
  <a class="navbar-brand" href="#">Veterinaria</a>
  <div class="btnWrapper">
    <button>Registrarte</button>
    <button>Ingrresar</button>
    <button class="toggler navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  </div>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="margen-down navbar-nav me-auto mb-2 mb-lg-0">
      <li class="nav-item">
        <a class="nav-link active white" aria-current="page" href="#">Inicio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Veterinari@s</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Dueñ@s</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Adopta</a>
      </li>
      <div class="separador"></div>
    </ul>
  </div>
</nav>

Una opcion diferente: Creo que es más correcto usar los nombres de clase de Bootstrap para lograr lo que quieres. Con navbar-right y btn-nav. Nota: los botones aparecen en la lista en pantallas pequeñas.

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

<nav class="margenes navbar navbar-expand-lg navbar-light" style="background-color: #cfeafd;">
  <a class="navbar-brand" href="#">Veterinaria</a>
  <div>
<button class="toggler navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
  </div>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="margen-down navbar-nav me-auto mb-2 mb-lg-0">
  <li class="nav-item">
    <a class="nav-link active white" aria-current="page" href="#">Inicio</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Veterinari@s</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Dueñ@s</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Adopta</a>
  </li>
  <div class="separador"></div>
</ul>
<ul class="nav navbar-nav navbar-right">

  <li>
    <div class="btn-nav"><a class="btn btn-primary btn-small navbar-btn" href="/register">Registrarte</a>
    </div>
  </li>
  <li>
    <div class="btn-nav"><a class="btn btn-primary btn-small navbar-btn" href="/register">Ingrresar</a>
    </div>
  </li>
</ul>
  </div>
</nav>

10
  • Hola @milmal, gracias por tu respuesta, el icono del toggler se queda arriba a la derecha, pero los botones de login y registro no, que puedo hacer? Commented el 20 dic. 2020 a las 18:15
  • Hola @HatoriHanso. Entendí mal. Actualicé la respuesta.
    – milmal
    Commented el 21 dic. 2020 a las 5:42
  • 1
    @HatoriHanso estableciendo un valor de breakpoint diferente en tus reglas media query, se me ocurre por ejemplo. Commented el 21 dic. 2020 a las 13:10
  • 1
    @HatoriHanso me parece que la respuesta de milmal es correcta, si necesitas aclaraciones adicionales, puedes revisar por acá los breakpoints en la doc oficial de Bootstrap getbootstrap.com/docs/5.0/layout/breakpoints/… Commented el 21 dic. 2020 a las 18:31
  • 1
    Lo solucione sacando mi bundle.min.js y dejando solo las dependencias que escribiste en la cabecera del codigo, gracias! Commented el 22 dic. 2020 a las 8:57

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.