1

Tengo un navbar hecho con Bootstrap y en el responsive se agrega un toggler, que funciona para desplegar hacia abajo, pero no vuelve a contraerse al hacer clic. ¿Qué debo hacer?

navbar

El código del navbar es:

<nav class="margenes navbar navbar-expand-lg navbar-light" style="background-color: #cfeafd;">
  <a class="navbar-brand" href="#">Veterinaria</a>
  <button class="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>
    </ul>
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Buscar" aria-label="Search">
      <button class="btn btn-outline-dark" type="submit">Buscar</button>
    </form>
  </div>
</nav>
</div>

Como ven, se despliega hacia abajo, pero al tocar, no vuelve a su posición original, y no sé como poder arreglarlo.

Javascript:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>

Gracias!

4
  • ¿Podrías adjuntar el código, como texto? Además, te referís al dropdown o al menú hamburguesa, como toggler?
    – padaleiana
    Commented el 19 dic. 2020 a las 13:08
  • Listo @padaleiana ya lo adjunte, y perdon, me refiero al toggler, me confundi los terminos, mala mia Commented el 19 dic. 2020 a las 13:11
  • Una última: ¿podrías adjuntar cómo estás importando bootstrap? ¿estás usando JS también?
    – padaleiana
    Commented el 19 dic. 2020 a las 13:23
  • 1
    Listo @padaleiana, ya lo adjunte al post Commented el 19 dic. 2020 a las 14:05

2 respuestas 2

2

Sucede que estás utilizando bootstrap.bundle.min.js, por lo tanto ya no es necesario utilizar popper.min.js + bootstrap.min.js ya que ambos están combinados en el primer script. Es como decir

bootstrap.min.js + popper.min.js = bootstrap.bundle.min.js.

Por lo tanto, quedaría de esta manera:

<!-- CSS agregado para mostrar el navbar con estilos-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<nav class="margenes navbar navbar-expand-lg navbar-light" style="background-color: #cfeafd;">
  <a class="navbar-brand" href="#">Veterinaria</a>
  <button class="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>
    </ul>
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Buscar" aria-label="Search">
      <button class="btn btn-outline-dark" type="submit">Buscar</button>
    </form>
  </div>
</nav>

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

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

SI ESTAS EN UNA VERSION ANTERIOR DE BOOTSTRAP DIRIGETE Y BUSCA LA NUEVA EJEMPLO ESTAMOS EN EL 28/03/2023 (dd/MM/yyyy) Y BOOTSTRAP TIENE LA VERSION

ESTE ES MI EJEMPLO DE QUE TRATO DE DECIR

ENTONCES AGREGO ESE CODIGO A MI EN SRC="" ASÍ DEBERÁ QUEDAR:

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

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.