Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

191
Vistas
Bootstrap 5 Navbar menu toggler will not open on mobile browsers

First time here. I am having trouble with my Bootstrap 5.1 Navbar menu. Some background: I am hosting my website locally via Xampp and my pages are php to allow for forms and cookies. Everything works great on the desktop. I have tested the responsiveness of my site in DevTools on different sized devices and the dropdown menu (the collapsed navigation menu) works perfectly on those. I then tried the dropdown menu on my S21 Ultra and Tab S6 using the locally hosted server. While the hamburger toggler will appear, it will not drop down the menu. I tried removing the button icon so that I could see if the button is toggling and it is, but it doesn't seem to be actually changing any of the values of the navbar as it does on the desktop or in the DevTools. I have tried everything. My code is up-to-date and the js and css for Bootstrap are placed in the correct locations. Please help.

          <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>

Again, it works fine on desktop and in mobile view using DevTools on Chrome. Any changes (CSS-wise) are only to color and size so they should not interfere. All other buttons on the webpage work. I am really unsure how to move forward.

All I need is for the drop-down menu to open when using a mobile device.

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Remove the -bs- from data-bs-target and data-bs-toggle like below.

 <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>
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda