Primera vez aquí. Tengo problemas con el menú de la barra de navegación de Bootstrap 5.1. Algunos antecedentes: estoy alojando mi sitio web localmente a través de Xampp y mis páginas son php para permitir formularios y cookies. Todo funciona muy bien en el escritorio. He probado la capacidad de respuesta de mi sitio en DevTools en dispositivos de diferentes tamaños y el menú desplegable (el menú de navegación colapsado) funciona perfectamente en ellos. Luego probé el menú desplegable en mi S21 Ultra y Tab S6 usando el servidor alojado localmente. Si bien aparecerá el conmutador de hamburguesas, no desplegará el menú. Intenté eliminar el ícono del botón para poder ver si el botón está alternando y lo está, pero en realidad no parece estar cambiando ninguno de los valores de la barra de navegación como lo hace en el escritorio o en DevTools. He intentado todo. Mi código está actualizado y js y css para Bootstrap están ubicados en las ubicaciones correctas. Por favor ayuda.
<nav class="navbar navbar-expand-lg navbar-light"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span><i id="s1-title-navbar-toggler" class="fas fa-chevron-down"></i></span> </button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav"> <li class="nav-item dropdown"> </li> <li class="nav-item"> <a class="nav-link" href="REDACTED.php">REDACTED</a> </li> <li class="nav-item"> <a class="nav-link" href="REDACTED.php">REDACTED</a> </li> <li class="nav-item"> <a class="nav-link" href="REDACTED.php">*REDACTED*</a> </li> <li class="nav-item"> <a class="nav-link" href="REDACTED.php">*REDACTED*</a> </li> </ul> </div> </nav>Nuevamente, funciona bien en el escritorio y en la vista móvil usando DevTools en Chrome. Cualquier cambio (en cuanto a CSS) es solo de color y tamaño, por lo que no debería interferir. Todos los demás botones de la página web funcionan. Realmente no estoy seguro de cómo seguir adelante.
Todo lo que necesito es que se abra el menú desplegable cuando uso un dispositivo móvil.
Elimine -bs- de data-bs-target y data-bs-toggle como se muestra a continuación.
<nav class="navbar navbar-expand-lg navbar-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span><i id="s1-title-navbar-toggler" class="fas fa-chevron-down"></i></span> </button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav"> <li class="nav-item dropdown"> </li> <li class="nav-item"> <a class="nav-link" href="REDACTED.php">REDACTED</a> </li> <li class="nav-item"> <a class="nav-link" href="REDACTED.php">REDACTED</a> </li> <li class="nav-item"> <a class="nav-link" href="REDACTED.php">*REDACTED*</a> </li> <li class="nav-item"> <a class="nav-link" href="REDACTED.php">*REDACTED*</a> </li> </ul> </div> </nav>