Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

197
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda