Elementor

Elementor hamburger menu not working on mobile: the fix

Speed plugins that defer jQuery can silently break your Elementor mobile menu. Here is how to find the cause and fix it in five minutes.

Elementor hamburger menu not working on mobile: the fix

Your Elementor hamburger menu works fine on desktop, works fine most of the time on mobile, and then just does nothing. No error, no animation, no dropdown. If a speed plugin went live around the same time you first noticed this, there is a very good chance you can fix it with one exclusion and a cache purge, and your PageSpeed score will not move.

The short answer: when a caching or optimization plugin defers jQuery, Elementor Pro’s menu scripts can fire before jQuery is ready. The click and hover handlers never attach, so tapping the hamburger does nothing. The fix is to exclude jquery.min.js from JS deferral. Everything below shows you how to confirm that is your problem and exactly what to change.

Why deferred jQuery breaks Elementor menus

Deferring JavaScript is a legitimate speed technique. It tells the browser to load a script after the HTML has parsed rather than blocking it, which improves Time to Interactive scores. The problem is that Elementor Pro’s navigation widget depends on jQuery being available the moment its own handlers run. If jQuery is still deferred and arrives a fraction of a second late, those handlers attach to nothing. The menu renders correctly visually, so there is no obvious sign anything went wrong until a user taps the hamburger and nothing opens.

What makes this intermittent rather than consistent is network variance. On a fast connection everything might load in the right sequence most of the time. Throttle the connection even slightly, or catch the page on a busy server moment, and the race condition surfaces. That is why the problem shows up on roughly one in five page loads rather than every single time.

We ran into this on a client site running Elementor Pro with LiteSpeed Cache active. The submenu was silently failing with no console errors, which made it harder to track down. The cause turned out to be exactly the race condition described above.

Confirm it before you change anything

LiteSpeed Cache has a built-in way to load a page without its optimizations applied. Add ?LSCWP_CTRL=before_optm to any page URL and reload. If the hamburger menu works every time with that parameter in the URL, and fails without it, JS deferral is your culprit. You do not need to guess.

If you are using a different plugin (WP Rocket, W3 Total Cache, Perfmatters, or similar), look for a “disable optimizations” toggle or a “safe mode” URL parameter in that plugin’s documentation. The diagnostic principle is the same: strip the JS manipulation out temporarily and see if the menu comes back.

If the menu still fails with optimizations disabled, the problem is elsewhere. Possible causes include a theme or plugin JavaScript conflict, a missing Elementor Pro license causing scripts not to load, or a misconfigured CDN stripping query strings. At that point a proper technical audit is worth running to get a full picture.

The exact fix for LiteSpeed Cache

Once you have confirmed the cause, the fix is a single exclusion. Here are the steps in order:

  1. In your WordPress dashboard, go to LiteSpeed Cache → Page Optimization → JS Settings.
  2. Find the field labelled JS Deferred Excludes.
  3. Add jquery.min.js on its own line. Do not remove any exclusions already there.
  4. Save changes.
  5. Go to LiteSpeed Cache → Toolbox → Purge and purge all caches.

If you prefer WP-CLI and have server access, two commands handle both steps:

wp litespeed-option set optm-js_defer_exc "jquery.min.js"
wp litespeed-purge all

That is the full change. jQuery now loads normally (it is small enough that blocking it has negligible impact on your score), and Elementor Pro’s handlers attach reliably on every load. On the client site where we applied this, PageSpeed Insights came back at 94 on desktop and 81 on mobile after the fix, the same as before.

For other speed plugins, the setting has different names but the same logic applies. In WP Rocket it lives under File Optimization → Exclude scripts from Delay (or the JS deferral exclusion field depending on your version). In Perfmatters, look under Script Manager or the defer exclusion list. Check your plugin’s official documentation for the exact field name before you edit anything, since wrong exclusions in the wrong field can have unintended side effects.

How to confirm the fix held

Do not just tap the menu once and move on. Here is a quick checklist to be sure:

  • Reload the page five times on a real mobile device (not just browser DevTools) with your phone on a standard mobile connection, not Wi-Fi.
  • Load the page on a throttled connection in Chrome DevTools (set Network to Slow 4G) and tap the hamburger each time.
  • Open Chrome DevTools, go to the Console tab, and reload. There should be no jQuery-related errors on any load.
  • Run PageSpeed Insights on the page before and after to confirm your score did not drop meaningfully.
  • Load the page once with ?LSCWP_CTRL=before_optm and once without, and confirm the behaviour is identical now.

If all five pass, you are done. If the menu still misfires on a throttled connection after the exclusion is in place, there may be a second deferred script involved. Check your JS Deferred Excludes list for elementor-pro/assets/js/ and add the specific handler file if it appears in the Network panel as loading late.

When to get a developer involved

Most site owners can apply this fix in under ten minutes. If you are comfortable in the WordPress dashboard and not afraid of a settings page, go ahead. The risk of this specific change is low: you are excluding one small file from deferral, not disabling optimization globally.

It is worth calling in help if the diagnostic step does not give you a clear answer, if you are running multiple optimization plugins layered on top of each other, or if the menu fix breaks something else (a sign the JS load order across your plugin stack has deeper conflicts). That kind of investigation is what our care and maintenance plans cover on an ongoing basis, so issues like this get caught and fixed before a client notices them.

Elementor Pro is a capable builder, and LiteSpeed Cache is genuinely one of the better caching plugins available. They just need one small configuration adjustment to cooperate on mobile navigation. If you have been chasing this bug for a while, the fix above is almost certainly it. If you would rather have us take a look and confirm, book a free 30-minute call and we can run through it with you.

Top Rated Plus · 100% Job Success

Let's build it properly.

A short call, a clear scope and a written estimate within 48 hours. No pressure, no agency-speak.

Hire on Upwork

5.0 on Upwork · 69 jobs delivered · 10,000+ hours logged