'Issue with Bootstrap Navbar Toggle Button not working

Wondering why my Bootstrap toggler isn't working. Viewed a few other thread on a similar issue appearing, but didn't find an appropriate solution since everything seems in order.

  <body>
      <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
        <div class="container">
        <a href="#" class="navbar-brand">Frontend Bootcamp</a>\
        <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navmenu"
      >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navmenu">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <a href="#learn" class="nav-link">What You'll Learn</a>
            </li>
            <li class="nav-item">
              <a href="#questions" class="nav-link">Questions</a>
            </li>
            <li class="nav-item">
              <a href="#instructors" class="nav-link">Instructors</a>
            </li>
          </ul>
        </div>
      </div>
      </nav>
</html>
htmlcss


Solution 1:[1]

if you are questioning why your icon does not appear, it's because of it's color, use text-white class to make it visible (or add .navbar-inverse to your navbar)

if your collapse is not working it's probably because you did not link bootstrap.js in your project

https://jsfiddle.net/mahdiar_mansouri/3u5jvw1d/5/

this fiddle is based on your code, it has the icon visible (two icons actually, one from bs itself another from bootstrap icon package) and it's collapse is working fine

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions