Hamburger triage
Bricks Mobile Menu Not Working: The Deleted Toggle, the Wrong Breakpoint and the Offcanvas That Stays Shut
On a laptop the header is perfect: logo left, five links right. On a phone the links are gone and so is any way to reach them. Bricks did not lose your menu. It folded it into a panel and is waiting for a button that, quite often, someone deleted while tidying up.
October 15, 2026 · 9 min read
The short answer
A Bricks mobile menu usually fails for one of five reasons: the Toggle was removed from a Nav (Nestable) element, the mobile settings were edited at the wrong breakpoint, an Offcanvas sits inside the Nav and fights its toggle, an optimization plugin delays or strips the menu's script and CSS, or the open menu sits under other content. Check the Toggle first.
On this page
- What a broken Bricks menu looks like on a phone
- Nav Menu or Nav (Nestable): find out which one you built
- The tidy-up that hides every link
- Four more causes, checked in this order
- Bringing the hamburger back, step by step
- Keeping a phone menu working through updates
- When the menu works and the header still fights you
What a broken Bricks menu looks like on a phone
Before opening the builder, test the live page on a real phone and in a desktop browser narrowed below 768 pixels. Write down which of these you see, because each points at a different setting. If the whole header is missing rather than just the menu, the template itself is the problem; WordPress header not showing covers that.
- Nothing at all. The logo shows but no links and no hamburger icon.
- A dead hamburger. The icon appears, but tapping it does nothing, or works only on the second tap.
- A menu you cannot close. The panel opens and covers the toggle, or the backdrop never goes away.
- A menu under the page. It opens, but the hero image or a sticky bar sits on top of it.
- Desktop links squeezed onto a phone. No hamburger appears, and the links wrap into three ragged lines.
- Two menus fighting. An Offcanvas opens alongside the built-in mobile panel, or neither opens.
Nav Menu or Nav (Nestable): find out which one you built
Bricks has two menu elements, and they build mobile menus in opposite ways. Click the menu in the builder's Structure panel and read its name. Our Bricks Builder review covers headers in general; here is what matters for phones.
Nav Menu is the original element. It displays a menu you manage under Appearance > Menus and prints its own hamburger toggle. Its Mobile menu settings include Show at breakpoint (or Hide at breakpoint), a left or right position, a width with a 300px placeholder, and a Hide close checkbox. You never add a toggle by hand.
Nav (Nestable) arrived with the Menu Builder in Bricks 1.8. It holds any elements you like, and the same markup serves desktop and mobile. When you add one, Bricks fills it with two links, one Dropdown and two Toggle elements: Toggle (Open: Mobile) and Toggle (Close: Mobile), the second inside the Nav items block. Nav items cannot be deleted on its own, because it is the mobile panel. Both elements default to showing the mobile menu at the 768-pixel breakpoint and offer Always and Never as options.
| Nav Menu | Nav (Nestable) | |
|---|---|---|
| Where links come from | A WordPress menu in Appearance > Menus | Elements placed inside the Nav in the builder |
| Hamburger toggle | Built in, styled under Hamburger toggle | Separate Toggle elements you can move or delete |
| Mobile panel | A separate mobile menu wrapper | The Nav items block, restyled at the breakpoint |
| Remove the toggle | Not possible; it is part of the element | Links vanish at the breakpoint with no way to open them |
| Custom mobile content | Limited to the WordPress menu | Any elements, or an Offcanvas opened by a Toggle |
The tidy-up that hides every link
Here is the trap. A designer builds a Nav (Nestable), sees two toggle icons in the Structure panel, decides the site does not need a hamburger, and deletes them. Desktop looks fine. On a phone the menu is gone. At the mobile breakpoint, the Nav items block stops being a row of links and becomes a hidden panel, and only a Toggle can open it. Without one, the panel stays closed forever.
A user reported this on the Bricks forum as a bug during the 2.0 release candidates. Staff closed it as not a bug: a toggle is required for the mobile menu to display. Their advice for anyone who wants plain links on phones was to set Show at breakpoint to Never, so the mobile panel is never used. The older Nav Menu behaves differently, because its hamburger cannot be removed, which is why people moving from one element to the other get caught.
Four more causes, checked in this order
Mobile settings saved at the wrong breakpoint
Bricks styles cascade down from desktop. The Academy flags this as important: edit the Mobile menu and Nav items settings while the builder is on the breakpoint where the mobile menu starts. Style the panel on desktop and the desktop menu inherits it; style it one breakpoint too low and phones held sideways never see it. If you changed breakpoint widths under Custom breakpoints in Bricks > Settings > General, regenerate CSS files too, or old widths linger; see Bricks CSS not updating. Check: switch to each breakpoint in the builder toolbar and watch the responsive control indicators, which mark controls holding a value for that breakpoint.
An optimizer delaying the script or stripping the open state
A toggle works by adding a class (brx-open by default) that the menu's CSS responds to. Script delay features hold Bricks' front-end script until the first interaction, so the first tap wakes the script instead of opening the menu. Remove-unused-CSS tools scan the page before anyone taps, see no element with the open class, and may strip the rules that style it. In one Bricks forum thread, users traced dead toggles to delay, minify and unused-CSS features in plugins such as WP Rocket, Perfmatters and FlyingPress, and fixed them by excluding Bricks scripts from the delay. Check: disable the optimizer's delay and unused-CSS features and retest; theme JavaScript errors explains the console.
An Offcanvas placed inside the Nav
To show different content on phones, Bricks recommends an Offcanvas opened by a Toggle. The Menu Builder article warns that placing the Offcanvas inside the Nav (Nestable) lets the two toggle systems interfere; put it after the Nav. Then paste the Offcanvas element ID into the Toggle's CSS selector setting and delete Toggle (Close: Mobile). Dropdowns inside an Offcanvas need Position: Static so they open in the document flow. Since Bricks 1.11, a Toggle Offcanvas interaction can open it from any element.
A panel trapped under other layers
The default Dropdown z-index is 1001, and the Academy suggests giving the Toggle a z-index of 1001 or more under Style > Layout so the open menu does not cover it. A sticky header with a lower z-index than the hero, or a parent with a CSS transform or overflow set to hidden, can clip a panel too. Check: inspect the open panel and walk up its parents.
Bringing the hamburger back, step by step
- 1
Identify the element
Open the header template under Bricks > Templates and select the menu in the Structure panel. Note whether it is Nav Menu or Nav (Nestable).
- 2
Restore the toggle
For Nav (Nestable), confirm a Toggle sits after the Nav items block and a closing Toggle sits inside it. If you do not want a mobile panel, set Show at breakpoint to Never instead.
- 3
Set the breakpoint deliberately
Choose the breakpoint where the full menu stops fitting, then switch the builder to that breakpoint before styling the Mobile menu and Nav items settings.
- 4
Move any Offcanvas out
Place the Offcanvas after the Nav, paste its element ID into the Toggle's CSS selector, and enable Position: Static on dropdowns inside it.
- 5
Fix the stacking
Give the Toggle a z-index of 1001 or more, raise the sticky header above the content, and remove transforms or hidden overflow from the menu's parents.
- 6
Exclude the menu from optimization
Exclude Bricks scripts from JavaScript delay and protect the open-state classes from unused-CSS removal. Purge every cache.
- 7
Test on real devices
Open the live page logged out on an iPhone and an Android phone, in both orientations, and tap through every dropdown.
Keeping a phone menu working through updates
Mobile menus break quietly, because the person who updates the site checks it on a desktop. Add a phone test to every update: open the menu, open a dropdown, close it, follow a link. Update Bricks and the optimization plugin on staging first; staging copies do not count against a Bricks license. If several people edit the header, leave a short note in the template naming the Toggle and why it must stay. Our hosting and maintenance plans include that phone check.
Every optimizer exclusion you add for the menu is a note worth keeping, since a plugin reset wipes them. The Bricks speed guide shows which delay settings belong at the host and which in Bricks, and mobile speed for WordPress themes covers the wider phone experience. Generic menu failures across themes are in WordPress mobile menu not working.
When the menu works and the header still fights you
Most Bricks menu faults are one setting. A header that breaks after every optimizer change, builder update or new editor is a different story: the menu depends on Bricks' script, the optimizer's exclusions, the cache's purge rules and whoever last tidied the Structure panel. Each part is sound. Together they need constant supervision.
In a Next.js build, the header is one tested component, the open and close logic ships with it, and no plugin can delay or strip it after deploy. Editors change links in Athena CMS without touching the toggle. It costs more up front and layout changes need a developer. Weigh it in Bricks vs Next.js and plan it with Bricks to Next.js.
If you are staying on Bricks, our mobile responsive fixes cover phone layouts, our theme troubleshooting service finds the setting at fault, the theme repair team handles headers an update has broken, and our Bricks developers rebuild menus properly. If the builder will not open to fix any of this, start with Bricks builder not loading. More fixes are in the troubleshooting library.
Questions people ask before they call
Almost always because its Toggle elements were deleted. At the mobile breakpoint, the Nav items block becomes a hidden panel that only a Toggle can open. Bricks staff confirmed a toggle is required. Add a Toggle after Nav items, or set Show at breakpoint to Never if you want plain links on phones.
Select the Nav Menu or Nav (Nestable) element and change Show at breakpoint under Mobile menu. The default is the 768-pixel breakpoint, and the options include every breakpoint plus Always and Never. Style the mobile menu while the builder is set to that breakpoint. Custom breakpoint widths are set in the builder's breakpoint manager after enabling them in Bricks > Settings > General.
Usually a caching or optimization plugin is delaying JavaScript until the first interaction. The first tap loads the script; the second opens the menu. Exclude Bricks' front-end scripts from the delay feature, purge caches and test again logged out. Users in a Bricks forum thread report this pattern with plugins such as WP Rocket, Perfmatters and FlyingPress.
Use one when the phone menu needs different content from the desktop menu, such as a phone number or a search field. Place the Offcanvas after the Nav (Nestable), not inside it, point the Toggle's CSS selector at the Offcanvas ID, and set dropdowns inside it to Position: Static. For a simple menu, the Nav's built-in mobile panel is less to maintain.
Raise its stacking order. The Academy suggests a Toggle z-index of 1001 or higher under Style > Layout, and the header section should sit above the page content. Also check the menu's parent elements for a CSS transform or hidden overflow, which can clip a fixed panel. Mobile responsive fixes can sort it if the cause is buried.
Keep reading
- Three lines, no menuWordPress Mobile Menu Not Working: Why the Hamburger Does NothingWordPress mobile menu not working? Trace the dead hamburger to combined or delayed scripts, a breakpoint gap, an empty menu location or a z-index trap.
- Missing at the topWordPress Header Not Showing: Find Out Who Was Supposed to Print ItWordPress header not showing on one page, every page or only on phones? Check page layouts, builder display conditions, template parts and theme switches.
- Bricks editor first aidBricks Builder Not Loading: The Blank Canvas, the Endless Spinner and the 500 ErrorBricks builder stuck on a spinner or a blank canvas? Find the cause in order: Rocket Loader, firewalls, PHP limits, plugin conflicts and 2.4.x regressions.
- Bricks performance settingsBricks Builder Speed: The Defaults to Change, the Settings to Leave Alone, and the Hero That Lazy LoadsBricks builder speed in practice: CSS Loading Method, local fonts, lazy loading, query loop caching and the Core Web Vitals traps a fresh install leaves in.
- Builder reviewBricks Builder Review (2026): The Theme That Replaces Your Page BuilderBricks Builder review for 2026: who sells it, how the builder works, $79 to $599 pricing, speed settings, WooCommerce, the 2.4 bugs and who should buy.
- The developer's builderBricks Builder vs Next.js: The Best Case for Staying on WordPress, TestedBricks Builder vs Next.js on 22 rows: clean output, no jQuery, the $599 lifetime plan, 2.4 AI editing and its regressions, and where Next.js still wins.
- Everything in WordPress TroubleshootingSee the section
Get your Bricks menu working on every phone
Tell us what the menu does on a phone. We test it on real devices, trace the element, breakpoint or plugin at fault on a staging copy, and quote the fix before we make it.
Which of these sounds like you? (pick any)
Rather talk now? Call (210) 346-0848.