Bootstrap Navbar Collapse Not Working on Mobile: A Diagnostic Guide

Recognizable Condition

You are viewing the page below the breakpoint defined by your navbar-expand class—for example, navbar-expand-md collapses the menu below 768px. The hamburger or toggler button is visible, but clicking or tapping it does not reveal the navigation links. In DevTools, the collapsible <div> never gains the .show class, and its computed height remains at 0px. The Console may be silent, or it may show a script-loading error.

Cause and Diagnostic Table

What you observe	Likely cause	Fastest diagnostic
Toggler renders, but clicking has no effect; Console shows a script error	Bootstrap JavaScript bundle is missing, failed to load, or loaded before its dependencies	Network tab: confirm a 200 response for the bundle; Console: look for load errors
Toggler renders, no Console errors, menu still hidden	Markup uses the wrong data-attribute namespace for the loaded Bootstrap version	Elements panel: inspect the toggler for data-bs-toggle (v5) versus data-toggle (v4)
Toggler appears but does not respond to clicks	Custom CSS sets pointer-events: none on the toggler or overrides .collapse height/display	Computed styles for .navbar-toggler and the collapsible element
Menu works on some pages but not others	Multiple copies of Bootstrap JS or jQuery are loaded, causing plugin conflicts	Page source or Sources tab: search for duplicate script tags

Ordered Checks

1. Confirm the viewport is below the configured breakpoint

Bootstrap does not collapse at a fixed width. The navbar-expand-{sm|md|lg|xl|xxl} class controls when the horizontal menu appears. If you use navbar-expand-lg, the toggler only appears below 992px, not 768px. Use your browser's device toolbar to set a width below the breakpoint that matches your markup before diagnosing further.

2. Verify the JavaScript bundle is present and correctly ordered

Bootstrap 5 ships the Collapse plugin in bootstrap.bundle.js, which includes Popper. It does not require jQuery. Bootstrap 4 requires jQuery and either bootstrap.bundle.js or bootstrap.js plus Popper.

Open the Network tab, reload the page, and confirm the bundle returns a 200 status. For Bootstrap 4, ensure jQuery loads before the Bootstrap script. A missing or 404 bundle is the most common cause of a dead toggler.

<!-- Bootstrap 5 example -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.x/dist/js/bootstrap.bundle.min.js"></script>

<!-- Bootstrap 4 example -->
<script src="https://code.jquery.com/jquery-3.x.x.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.x/dist/js/bootstrap.bundle.min.js"></script>

3. Inspect the toggler markup for version-correct attributes

Bootstrap 5 introduced the data-bs-* attribute namespace. If you load Bootstrap 5 JavaScript but keep Bootstrap 4 markup, the plugin never binds because it listens for data-bs-toggle, not data-toggle.

Select the toggler button in the Elements panel and confirm the attributes match your version:

<!-- Bootstrap 5 -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
  <!-- nav links -->
</div>

<!-- Bootstrap 4 -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
  <!-- nav links -->
</div>

Also verify that the data-bs-target or data-target value exactly matches the id of the collapsible element.

4. Audit CSS that could block the transition

Custom stylesheets or utility classes can silently break the collapse animation or the toggler itself. Look for these patterns:

• .navbar-toggler { pointer-events: none; } — prevents clicks entirely.
• .collapse:not(.show) { display: block !important; } — forces the menu open at all widths, which is a different bug but often reported alongside collapse issues.
• Rules that override .collapsing height or transition properties.

In the Computed tab of DevTools, check the pointer-events value on the toggler and the height value on the collapsible element before and after clicking.

5. Check for duplicate or conflicting scripts

Loading two versions of Bootstrap, or two copies of jQuery, can cause plugins to initialize twice or fail silently. Search your page source for multiple references to bootstrap or jquery. In WordPress or other CMS themes, check whether a plugin enqueues its own copy in addition to the theme's.

Fixes Tied to Findings

If the bundle is missing or misordered

Add the correct bundle for your version and remove any duplicates. For Bootstrap 5, the bundle alone is sufficient. For Bootstrap 4, jQuery must appear before the Bootstrap script. Place scripts before the closing </body> tag or use defer in the <head>.

If the data attributes do not match the version

Update the markup to use the namespace required by the loaded JavaScript. When migrating from Bootstrap 4 to 5, change data-toggle to data-bs-toggle and data-target to data-bs-target. There is no need to change the .collapse or .navbar-collapse classes.

If CSS is blocking interaction

Remove or scope the offending rule. If you intentionally need to disable the toggler in a certain state, use a custom class rather than a global override:

/* Avoid this */
.navbar-toggler { pointer-events: none; }

/* Prefer a state-based class */
.navbar-toggler.is-disabled { pointer-events: none; }

If duplicate scripts are present

Delete the extra <script> tags. Keep exactly one Bootstrap bundle. If a third-party component requires its own copy, isolate it or update it to a version compatible with your Bootstrap release.

Escalation Criteria

Move beyond this guide when:

• The stock markup and scripts are correct, but a JavaScript framework wrapper (React, Vue, Angular) is not rendering the toggler attributes properly.
• The project uses a custom Bootstrap build via Sass or a bundler, and the compiled CSS is missing collapse-related utilities.
• A theme or plugin deregisters the expected Bootstrap script and enqueues a broken or partial replacement.
• The behavior differs across browsers after confirming the markup and scripts are identical, suggesting a browser-specific rendering or CSS issue.

Limitations and Verification

This guide covers stock Bootstrap 4 and 5 behavior. Bootstrap 3 uses a different markup structure and plugin API, and heavily customized themes may introduce additional variables.

To verify a fix, open DevTools, set the viewport below your navbar-expand breakpoint, and click the toggler. In the Elements panel, confirm that the collapsible element gains the .show class and that its computed height changes from 0px to a non-zero value. The navigation links should become visible without reloading the page.