1

Tengo un navbar hecho con las clases que nos brinda bootstrap 5.1, pero al abrirlo desde un móvil el botón responsive despliega el menú, sin embargo cuando elijo una opción del menú este no se contrae nuevamente. Alguien sabe de alguna clase o script que me permita replegar o regresar a su estado original el botón al elegir una opción ?

    <nav class="navbar_style navbar navbar-expand-lg navbar-dark sticky-top">
            <div class="container">
                <a class="navbar-brand" href="#">
                    <img src="img/Logos/workzone-logonav.png" alt="" width="115" height="54">
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#">INICIO</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#beneficios">BENEFICIOS</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#empresa">EMPRESA</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#cotizar">COTIZAR</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active">USUARIOS</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

1 respuesta 1

1

Lo que está generando esto, es la clase sticky-top en tu etiqueta.

En la documentación de bootstrap explica que

sticky-top: Coloca un elemento en la parte superior de la ventana gráfica, de borde a borde, pero solo después de desplazarse más allá de él.

Si tu quieres lograr que tu nav se coloque en la parte superior de la pantalla existe una clase especifica que se llama fixed-top

Así que tu código quedaría

<nav class="navbar_style navbar navbar-expand-lg navbar-dark  fixed-top">

Espero que te sirva de ayuda

2
  • utilicé esa clase fixed-top al principio pero solo hace que el Carousel o header quede debajo del navbar. El botón continua con el mismo inconveniente del collapse cuando se usa en dispositivos móviles. Utilicé una función con JavaScript que solucionó una parte solamente. Al elegir una opción del menú se colapsa de nuevo, sin embargo al darle click al botón del responsive no hace la acción aunque la llame desde el evento onclick. Sigo en la busqueda de la solución. Commented el 26 sept. 2021 a las 15:18
  • Edita tu publicacion y carga tus cambios realizados. Incluyendo una muestra de tu header y tu carrosel.
    – Lilibeth
    Commented el 26 sept. 2021 a las 15:49

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.