Diagnosing a Bulma Navbar Burger That Won't Open on Mobile

A Bulma navbar burger icon can appear on small screens yet stay inert when clicked. The menu never opens, and Bulma does not add the `is-active` class that reveals it. Because Bulma is CSS-only, the framework styles the open state but does not create it. This guide walks through the most common causes and how to confirm each one with browser DevTools.

Recognizable condition

On viewports below Bulma's navbar breakpoint, the burger icon renders but clicking it does not reveal the navbar menu. The menu stays hidden, and no `is-active` class appears on the burger or the `.navbar-menu` element. The page otherwise loads without errors.

Cause and diagnostic table

Match the observed behavior to the likely cause before changing code.

Observed behavior	Likely cause	Where to confirm
Burger renders; click does nothing; no `is-active` class	Missing toggle JavaScript	DevTools Elements panel after clicking the burger
Burger has `data-target`; menu has `id`; values differ	Attribute mismatch	DevTools Console query against the DOM
`is-active` appears on both elements, but menu stays hidden	Custom CSS or a clipping parent	DevTools Computed styles panel
Works with a clean CDN link but not in the project	Outdated or customized Bulma build	Network tab and installed package version

Ordered checks

1. Resize the browser below Bulma's navbar breakpoint, typically 1024px, or open DevTools and toggle the device toolbar to a mobile width.
2. Locate the burger button (``) and the menu container (``). Confirm the burger has a `data-target` attribute and the menu has a matching `id`.
3. Click the burger while DevTools is open. Inspect both elements and verify that `is-active` is added to each.
4. In the Console, run `document.querySelectorAll('[data-target]')`. Compare each returned value against existing element IDs in the page. Remember that `data-target` omits the leading `#`.
5. Check the Console for JavaScript errors that could block a toggle script from running.

Fixes tied to findings

Add the missing JavaScript toggle

Bulma ships no JavaScript. The CSS defines how `.navbar-menu.is-active` looks, but something in your application must add and remove that class. Add a vanilla JavaScript toggle in your page template or layout file, ideally just before the closing `` tag.

<script>
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.navbar-burger').forEach((burger) => {
    burger.addEventListener('click', () => {
      const target = burger.dataset.target;
      const menu = document.getElementById(target);
      if (!menu) return;
      burger.classList.toggle('is-active');
      menu.classList.toggle('is-active');
    });
  });
});
</script>

Required permissions: write access to the source file. Expected check: after reloading, clicking the burger adds `is-active` to both the burger and the targeted menu; clicking again removes it. Risk: if another script already handles the toggle, this snippet may conflict. Confirm no existing handler before adding it.

Correct the data-target and id pairing

Bulma's markup convention pairs the burger's `data-target` with the menu's `id`. The attribute value must match the ID without the leading `#`. Mirror the value in `aria-controls` for accessibility.

<button class="navbar-burger" data-target="nav-menu" aria-controls="nav-menu">
  <span></span>
  <span></span>
  <span></span>
</button>

<div class="navbar-menu" id="nav-menu">
  <!-- menu items -->
</div>

If `data-target="nav-menu"` but the menu uses `id="navbar-menu"`, the toggle script cannot find the element. Update one side so they match exactly.

Remove or narrow CSS overrides

If `is-active` appears on both elements yet the menu remains invisible, inspect computed styles in DevTools. Look for `display: none`, `visibility: hidden`, `opacity: 0`, or a parent with `overflow: hidden` clipping the menu. Add an override in a stylesheet loaded after Bulma, not in Bulma's source files.

.navbar-menu.is-active {
  display: block;
}

Keep overrides narrow. Broad rules such as `display: block !important` on `.navbar-menu` can interfere with Bulma's breakpoint behavior on larger screens.

Escalation criteria

Escalate when none of the targeted fixes resolve the issue:

• Load a clean Bulma CSS CDN link on a test page with no custom CSS. If the burger works there, the problem originates in your application stylesheet or build pipeline.
• Confirm the installed Bulma release. Class names and markup conventions can differ between Bulma 0.9.x and 1.x.
• Check whether a third-party navbar plugin or framework component expects different attributes or class names.

Verification

Reload the page, open DevTools, toggle the device toolbar to a mobile width, and click the burger. Confirm `is-active` appears on both the burger and `.navbar-menu`. Run the Console query from step 4 and verify every `data-target` value matches an existing ID. If the class appears and the menu displays, the issue is resolved.

Limitations

This guide covers the standard Bulma navbar burger pattern. Custom themes or heavily modified markup may use different selectors. Bulma does not provide a built-in JavaScript toggle, so the application must supply or maintain one. Do not edit Bulma source directly; keep overrides in a separate stylesheet loaded after Bulma to preserve upgradeability.

Rollback: If you added the script or CSS rule above, remove the `