A mobile hamburger menu can become unclickable when a WordPress theme and a navigation plugin both output their own menu controls in the same area. In this case, the Beaver Builder Theme displayed its own hamburger over Max Mega Menu’s mobile toggle. Adjusting z-index alone did not solve the issue because the wrong control was still being presented to visitors. Hiding the theme-provided hamburger and prioritizing Max Mega Menu’s native toggle restored mobile navigation.
Issue background
A WordPress site developed a high-priority mobile navigation issue. The hamburger icon appeared on phones and narrow browser windows, but tapping or clicking it did nothing.
An initial attempt to raise the menu’s z-index did not restore functionality. The issue appeared shortly after several updates involving:
- Max Mega Menu
- Beaver Builder Plugin (Pro)
- Beaver Themer
- Ultimate Addons for Beaver Builder Pro
- PowerPack for Beaver Builder
Because the problem affected navigation on all mobile devices, it needed to be resolved directly on the live site.
Diagnosis
The visible hamburger was not Max Mega Menu’s active mobile control. The Beaver Builder Theme was outputting its own hamburger and visually covering or replacing the toggle that Max Mega Menu expected visitors to use.
This explained why increasing z-index did not help. The issue was not simply that the menu panel sat behind another element. Two separate navigation controls existed, and the theme-provided control was the one receiving attention even though Max Mega Menu owned the actual menu behavior.
The working solution was to hide the Beaver Builder Theme hamburger and prioritize Max Mega Menu’s own mobile navigation toggle.
Resolution steps
- Reproduce the issue at the mobile breakpoint. Test both a physical phone and a narrow desktop browser window.
- Inspect the visible hamburger. Use browser developer tools to identify which theme or plugin generated the button.
- Look for duplicate controls. Search the rendered header for more than one hamburger, toggle button, or mobile-menu trigger.
- Check event ownership. Determine which control has the JavaScript listener that opens Max Mega Menu and which control is only part of the theme layout.
- Avoid relying only on z-index. If the wrong button is visible, layering changes will not make it trigger another plugin’s menu behavior.
- Hide the conflicting theme control. Apply narrowly scoped CSS to remove the Beaver Builder Theme hamburger at the affected breakpoint.
- Prioritize the Max Mega Menu toggle. Ensure Max Mega Menu’s native mobile button remains visible, positioned correctly, and able to receive pointer events.
- Check the menu panel itself. Confirm that the expanded navigation is not blocked by overlays, transparent containers, or fixed header elements.
- Test touch and mouse interaction. Verify that tapping and clicking both open and close the menu reliably.
- Review keyboard accessibility. Confirm that the toggle can receive focus, activate with the keyboard, and expose an accurate expanded or collapsed state.
- Test responsive transitions. Resize between desktop and mobile layouts to ensure duplicate controls do not reappear.
- Clear caches. Purge Beaver Builder, Max Mega Menu, WordPress, CDN, and browser caches after changing the header CSS.
- Review the visual difference. The Max Mega Menu toggle may not exactly match the theme’s previous hamburger styling. Adjust its appearance only after functionality and accessibility are confirmed.
A simplified CSS approach might look like this:
/* Hide the theme-provided mobile toggle */
.theme-mobile-toggle {
display: none;
}
/* Keep Max Mega Menu's toggle available */
.mega-menu-toggle {
position: relative;
z-index: 9999;
pointer-events: auto;
}The actual selectors should be taken from the site’s rendered header. Beaver Builder and Max Mega Menu class names can vary based on the theme, layout, and menu configuration.
Final outcome
Hiding the Beaver Builder Theme hamburger and using Max Mega Menu’s native mobile toggle restored the navigation on phones and mobile browser widths.
The replacement toggle had slightly rounder edges than the original theme control, but the visual difference was minor and accepted because the menu was fully functional again.
The key lesson is that an unclickable hamburger is not always a layering problem. When both a theme and a menu plugin generate mobile controls, the visible button may not be connected to the menu JavaScript at all. Identifying and removing the duplicate control is often more effective than repeatedly increasing z-index.
For help troubleshooting Beaver Builder headers, Max Mega Menu, or unresponsive WordPress mobile navigation, contact Freshy.
