Sydney Mobile Menu Not Working: First Find Out Which Header You Have

Find your Sydney header generation before touching a setting

Sydney's 2.71 code still carries three header systems. The oldest, which aThemes support calls the legacy or version 1 header, prints a logo, a small toggle button and the primary menu, and a script turns that menu into a dropdown on narrow screens. A later modern header split desktop and mobile layouts and added a Mobile header section. The current Header & Footer Builder, which support calls version 3, replaced both on new installs. Each one stores its phone settings in a different place, so a fix written for one does nothing for the others.

If the Customizer leaves you unsure, view the page source on your phone or a desktop browser. A body class of has-shfb-builder means the builder is in charge. A div with the class btn-menu means the legacy header. Write the answer down, because every step below depends on it, and so does the advice in our Sydney header not showing guide.

Dead icon, blank drawer, doubled arrows: what each one points to

Test on a real phone, logged out, in a private tab, then match what you see. A logged-in desktop browser shrunk to phone width skips the page cache and usually skips script delay too, so it passes while customers fail. The general version of this diagnosis is in WordPress mobile menu not working; the Sydney version is narrower.

• No hamburger at all: the Menu Toggle is missing from the Tablet/Mobile rows, or the navigation behind it holds no menu list. Sydney's script hides the toggle on purpose in that case.
• The icon is there, the tap does nothing: the script never ran or ran late. Optimizers and script errors from other plugins come first.
• The drawer slides in, empty: the Off-Canvas Menu component is not in the Mobile Offcanvas area.
• The drawer shows the wrong links: a forgotten menu sits in the Mobile menu (optional) location, which overrides Primary.
• Two or three arrows beside parent items (legacy header): the old menu script has run more than once on the same page, explained below.
• It opens, then snaps shut: a second script is handling the same tap.

Sydney's usual menu breakers, ranked

The Tablet/Mobile tab was never filled in

aThemes' builder documentation is plain about this: the mobile header does not inherit the components you placed on the desktop. A site rebuilt in the builder on a laptop can ship with an empty phone header. Open Customizer, Header, Header Builder, switch to the Tablet/Mobile tab and confirm a Menu Toggle sits in a row. Then open the Mobile Offcanvas area and confirm the Off-Canvas Menu component is inside it. The drawer prints the Mobile menu (optional) location when something is assigned there, and Primary otherwise.

An optimizer got to functions.min.js

Sydney's menu code lives in js/functions.min.js, loaded in the footer with no jQuery dependency, and it starts as soon as the page is parsed. Delay-until-interaction features hold it back, so the visitor's first tap is the interaction that wakes the script and the tap itself is lost. Combining it into a bundle means an error in any earlier code in that file stops it. Exclude /themes/sydney/js/functions.min.js from delay and combine, purge every cache and retest. If you also ticked Disable jQuery Migrate under General, Performance, untick it while testing: an older plugin that relied on Migrate can throw an error that halts a combined file.

Max Mega Menu, an Elementor add-on or an old child theme

In the 2.71 builder code, if Max Mega Menu is enabled for the Primary location and nothing is assigned to Mobile menu (optional), Sydney skips its own Menu Toggle and prints the mega menu instead, so phone behavior follows Max Mega Menu's settings, not Sydney's. In one Sydney forum thread a hamburger that opened and closed at once was traced to an Elementor add-on pack; switching it off fixed it. The same thread found a child theme involved. A child theme carrying a header.php copied from an old Sydney release prints old markup that today's script does not expect.

Legacy header: the script that runs twice

Reading the 2.71 script, the legacy mobile menu repeats its setup on every window resize below 1,024 pixels. Each run adds another arrow and another tap listener to each parent item. Phones fire resize events when rotated, and some browsers fire them as the toolbar shrinks. The result is doubled arrows and sub-menus that toggle twice per tap, which looks like nothing happening. Reloading clears it for a while. Moving to the builder clears it for good, with the caveats below.

The 1,024-pixel line, and the slider that moves half of it

Sydney switches to its phone header at 1,024 pixels and below, so a tablet held sideways at exactly 1,024 pixels gets the hamburger, not the desktop menu. The builder exposes the number as Mobile Breakpoint in the Header Builder section, and the generated CSS follows whatever you set. Several of the theme's scripts do not. The sticky header and header search code in functions.js still test for 1,024 pixels directly.

So if someone moved the slider to, say, 900, there is a band of widths where the stylesheet shows the desktop header while the scripts behave as if the phone header were in charge. Put it back to 1,024 unless you have tested every width in between on real devices. The fastest way to spot a band like this is to rotate a tablet slowly in front of the site and watch what changes. Our WordPress theme mobile speed guide explains why tablets deserve their own test pass.

Restoring the Sydney drawer, one change at a time

1. 1

   Copy the site to staging

   Every change below happens on a copy first. Sydney updates have changed headers before, and a broken live menu costs real visitors.

2. 2

   Identify the header generation

   Use the table above. Do not paste builder advice onto a legacy site, or legacy CSS onto a builder site.

3. 3

   Check the menu locations

   In Appearance, Menus, Manage Locations, confirm Primary holds your menu and that Mobile menu (optional) is either empty or deliberately set.

4. 4

   Check the builder's mobile layout

   Header Builder, Tablet/Mobile tab: a Menu Toggle in a row, the Off-Canvas Menu inside Mobile Offcanvas, Mobile Breakpoint at 1,024.

5. 5

   Take the optimizer out of the picture

   Turn off delay, defer and combine for JavaScript, purge page, host and CDN caches, and test logged out on a phone. If the menu works, add exclusions for functions.min.js and jQuery and switch the rest back on.

6. 6

   Read the console

   Use remote debugging from a desktop browser. The first red error names the file at fault; theme JavaScript errors explains how to read it.

7. 7

   Isolate plugins

   Disable Max Mega Menu, Elementor add-on packs and any menu plugin one at a time. The method is in theme plugin conflicts.

8. 8

   Push, purge, retest

   Deploy the fix, purge every cache once more and tap through parent items and sub-menus on two phones before calling it done.

A short rulebook for the next Sydney release

Most repeat failures on Sydney come from three habits: updating the live site directly, tuning an optimizer on the live site, and testing only on a laptop. The forum record backs the first. Version 2.69 changed one owner's sticky header colors on scroll until they rolled back to 2.68, and aThemes could not reproduce it. Nobody can promise the next release is clean, so make the copy take the risk.

• Update Sydney, Elementor and every add-on on staging, then tap the hamburger on a real phone before pushing.
• Keep a written list of the scripts excluded from delay and combine, so the next plugin update does not quietly undo them.
• Do not enable the Header & Footer Builder on a legacy site with a pasted snippet on the live server. Sydney's own retired upgrade notice warned that old header and footer customizations would be lost, and in a recent forum thread the switch left one owner's header uneditable and footer gone.
• Give the Mobile menu (optional) location a short menu of its own, or leave it empty on purpose, and note which you chose.
• If the work keeps slipping, our hosting and maintenance plans run tested updates on a copy first.

Elementor sites have a second layer to watch, because builder sections can cover or push the header on phones. Elementor mobile layout problems covers that side, and the wider Elementor repair hub covers the rest. The Sydney-specific background is in our Sydney review.

If the hamburger is the third thing to break this year

A phone menu should be the most boring part of a website. On a Sydney site it depends on which of three header systems your install happens to run, on a theme script, on Elementor and its add-ons, on an optimizer that rewrites script loading and on a page cache that remembers yesterday. Each vendor tests its own piece. Nobody tests your combination except your customers. When the menu is slow rather than broken, the Sydney speed guide shows what competes with it for the phone's attention, and INP on WordPress and Next.js explains how a sluggish tap is scored.

In a Next.js build the menu is one component in one codebase, tested before each deploy, with nothing rewriting its scripts afterward. That costs more up front and needs a developer for structural changes. Sydney vs Next.js weighs the trade fairly, and Sydney to Next.js explains the move. If you would rather keep Sydney and have someone else find the broken piece, our theme troubleshooting team works on staging and reports what it changed. More fixes live in the troubleshooting section.