How to fix navbar not collapsing in bootstrap

BootstrapDebug / FixBeginner · 4 min read

Fix Navbar Not Collapsing in Bootstrap: Simple Solutions

The navbar does not collapse because the required Bootstrap JavaScript is missing or the HTML structure is incorrect. Ensure you include Bootstrap's JS bundle and use the correct data-bs-toggle and data-bs-target attributes on the toggle button.

🔍

Why This Happens

The navbar fails to collapse because Bootstrap's JavaScript is not loaded or the toggle button is not set up properly. Without the JavaScript, clicking the toggle button does nothing. Also, incorrect data-bs-toggle or data-bs-target attributes break the toggle functionality.

html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- Missing Bootstrap JS -->

Output

Navbar toggle button does not open or close the menu on small screens.

🔧

The Fix

Include Bootstrap's JavaScript bundle for the toggle to work. Also, update the toggle button attributes to use Bootstrap 5 syntax: data-bs-toggle and data-bs-target. This ensures the button controls the collapse element correctly.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Navbar Fix</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Brand</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output

Navbar toggle button works correctly, collapsing and expanding the menu on small screens.

🛡️

Prevention

Always include Bootstrap's JavaScript bundle when using interactive components like the navbar. Use the correct data-bs-* attributes as per Bootstrap 5 documentation. Test your navbar on small screens and use browser DevTools to check for JavaScript errors.

Keep your Bootstrap CSS and JS versions consistent to avoid compatibility issues.

⚠️

Related Errors

Other common issues include:

Navbar toggle button not visible: Missing navbar-toggler-icon span or incorrect CSS.
Collapse works but menu stays open: Incorrect aria-expanded attribute or JavaScript conflicts.
Multiple navbars collapsing together: Duplicate id attributes on collapse elements.

✅

Key Takeaways

Include Bootstrap's JavaScript bundle to enable navbar collapse functionality.

Use Bootstrap 5's data-bs-toggle and data-bs-target attributes on the toggle button.

Ensure the collapse element has a unique id matching the toggle's target.

Test navbar behavior on small screens using browser DevTools.

Keep Bootstrap CSS and JS versions consistent to avoid conflicts.