Astra Mobile Menu Not Working: Find the Switch That Failed

Six ways an Astra hamburger lets a visitor down

Owners rarely describe this problem the same way twice, which is part of why it lingers. The menu is not simply broken or working. It fails in particular, repeatable ways, and each one points to a different part of the theme. Match what you see on the phone to one of these before changing a single setting.

• The tap does nothing. The icon sits there. No panel, no X. This is almost always a script problem, not a menu problem.
• The X appears, the panel is empty. The toggle script ran, but the menu markup or its styling did not arrive. One wordpress.org report on the free theme describes exactly this on real phones, while desktop and device emulation looked fine.
• The panel opens with the wrong links. You see every page on the site in a plain list, or last year's menu.
• Submenus misbehave. Tapping a parent item opens its page when you wanted the children, or the children never expand.
• Two headers at once, or none. Around tablet widths the desktop and mobile headers overlap, flash, or both vanish.
• It works for you, not for customers. Logged in, everything is fine. Logged out on mobile data, it fails.

If the header itself is missing elements or ignoring your edits, that is a builder problem rather than a menu problem, and our notes on the Astra header builder start there. This page stays on the hamburger and the panel it opens.

How Astra decides a visitor is holding a phone

Astra does not ask the device what it is. It measures the window. Below 921 pixels, the header switches to its mobile layout and the toggle menu takes over; 544 pixels is the separate mobile breakpoint used for phone-only styling. Since version 4.13.1 the theme prints a tiny inline script right after the opening body tag that watches the window width and adds a class called ast-header-break-point to the page. Version 4.13.9 made that script sync in both directions as a tablet rotates. Everything about the mobile header keys off that class.

The header builder stores two sets of rows, desktop and mobile. There is no separate tablet layout, so a tablet narrower than 921 pixels gets the phone header, which surprises owners who only ever designed the desktop. The panel itself is configured in the builder's Off-Canvas section: Header Type offers Flyout, Full-Screen and Dropdown in the free 4.14.0 code, with Dropdown as the default. The links come from a separate menu location named Off-Canvas Menu, not from your Primary Menu. Opening and closing it is the job of the theme's frontend script, which loads in the footer.

What usually breaks it, and the proof for each

Script optimization tops the list because it fits the most common symptom: the hamburger is visible, which proves the header HTML and CSS arrived, but nothing responds, which proves the script did not run in time. Delay features hold scripts until the first scroll or tap, so the visitor's first tap is spent waking the page. Combining can also break the order in which scripts expect to run; Astra 4.12.0 fixed a 'flexibility is not defined' error that appeared with optimization plugins such as WP Rocket. The browser console on a real phone, reached through remote debugging, will show any error by name.

Bugs Brainstorm Force has already fixed for you

The 4.13 series touched the header often, and several of its fixes describe mobile menu symptoms word for word. If your site runs an older 4.13 release, updating on staging may be the whole repair. These entries come from the changelog that ships with Astra 4.14.0.

• 4.13.2: the main header's burger icon stayed in its close (X) state after a sticky header released.
• 4.13.4: dual header display and header button visibility problems at the mobile and desktop breakpoint.
• 4.13.7: a desktop toggle dropdown closed when a parent item with children was clicked in Dropdown Target: Link mode.
• 4.13.9: mobile menu styles briefly applied to the desktop header after resizing or rotating a tablet across the breakpoint on slow pages.
• 4.13.11: tapping the submenu arrow on touch devices followed the parent item's link instead of opening the submenu.
• 4.13.12: Firefox rendered top-level dropdown arrows on a separate row on older sites, a regression from the 4.13.11 touch target change.

Notice the pattern: a fix in one release produced a fresh oddity in the next. That is ordinary software, and it is also the strongest argument for testing every theme update on a copy first. Our guide to layout breaking after an Astra update covers version pairing with Astra Pro, and a theme that broke after an update explains the rollback.

Repairing the Astra mobile menu, step by step

1. 1

   Reproduce it properly

   Use a real phone, logged out, on mobile data, in a private tab. Note the exact symptom from the list above. Emulation in a desktop browser runs with your login and your cache state, so it can pass while customers fail.

2. 2

   Turn off script optimization

   In WP Rocket, LiteSpeed Cache, SiteGround Speed Optimizer or whatever you run, switch off delay, defer and combine for JavaScript. Purge every cache layer and retest. If the menu works, re-enable one option at a time and exclude Astra's frontend script from the one that breaks it.

3. 3

   Check the menu location

   Under Appearance > Menus > Manage Locations, assign the menu you want to Off-Canvas Menu. If nothing is assigned, Astra falls back to a list of pages, which explains the 'every page shows up' complaint.

4. 4

   Rebuild the mobile rows deliberately

   In the Customizer header builder, switch to the mobile layout. Place the Toggle Button in a visible row and make sure the Off-Canvas area contains the Off-Canvas Menu element.

5. 5

   Set the panel behavior

   In the Off-Canvas section choose Flyout, Full-Screen or Dropdown, and set Dropdown Target to Icon if parent items must stay clickable links. Publish.

6. 6

   Update Astra on staging

   If you run a 4.13 release older than 4.13.12, update Astra and Astra Pro together on a staging copy and retest the same phone.

7. 7

   Retest across the switch point

   Check widths just below and above 921 pixels, and rotate a tablet. If the switch point is wrong for your menu, a developer can move it with the astra_tablet_breakpoint filter in a child theme.

Stopping the hamburger from breaking again

Most repeat failures come from the same three habits: changing optimization settings on the live site, updating the theme without the Pro addon, and testing only on a desktop. Fix the habits and the menu tends to stay fixed. Keep a short written list of the exclusions you added to your optimization plugin, because the next person to tune speed will otherwise undo them.

• Test the menu on a real phone after every theme, builder or optimization change, logged out.
• Keep Astra and Astra Pro on matching release lines, updated together on staging.
• Give the Off-Canvas Menu location its own short menu instead of reusing a long desktop one.
• If your host or plugin keeps a separate mobile cache, purge it along with the main cache.
• Watch the site with an uptime and form monitor; a website health check is a free first look.

If the menu loads but feels sluggish to open, that is a speed problem rather than a breakage. The Astra speed guide covers what competes with the menu script on a phone's main thread, and the general WordPress mobile menu guide explains the same failure across other themes.

When a menu that keeps breaking is really the stack

A mobile menu is one of the oldest solved problems on the web. When it breaks every few months on your site, the cause is rarely the menu. It is the number of separate products touching it: the theme, the Pro addon, a builder header, a caching plugin, a script optimizer and a host cache, each updating on its own day. Our Astra review is fair to the theme. The fragility lives in the seams between those products.

On a Next.js site the menu is a component in one codebase, tested in a build before deploy, with no plugin rewriting its scripts afterward. That costs more up front and needs a developer for structural changes. See Astra vs Next.js for the trade-offs and moving an Astra site to Next.js for the process. Editors keep plain fields and a real preview in Athena CMS. If you would rather keep Astra, our theme troubleshooting service finds the failing piece first, and the Astra repair hub and troubleshooting section cover the neighboring problems.