Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

202
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!