The most common way to create a mobile menu in Elementor is by using the Popup
Builder. It is simple, flexible, and works well in most cases.
However, once you start optimizing your website for Lighthouse, PageSpeed Insights, SEO, and cleaner frontend structure, Elementor popups quickly introduce several limitations:
- The mobile menu is rendered outside the
<header>element - Elementor popups add additional JavaScript and CSS assets
- WP Rocket’s Delay JavaScript Execution or Defer JavaScript features can break the popup interaction on first load
The third issue is usually the biggest problem.
A common complaint looks like this:
“When I click the hamburger menu, nothing happens.”
Technically, the popup eventually works, but only after delayed scripts are executed. This creates a poor user experience, especially on the first interaction.
Of course, you can exclude Elementor or Elementor Pro scripts from WP Rocket optimization, but that defeats the purpose of performance optimization. Once JavaScript delay is enabled, popup-based menus become unreliable unless multiple exceptions are added.
A cleaner solution is to build the mobile menu directly inside the Elementor Header template — without using popups at all.
Build the Mobile Menu Inside the Header Template
You will need a small amount of custom code, but nothing complex.
Create your mobile menu directly inside the Elementor Header template using Containers or Sections, just like you would when building a popup menu.
Add a custom class to the mobile menu container, for example:
mobile_menu_contentNext, add a hamburger icon to the header.
Instead of connecting it to an Elementor popup, simply assign a custom class:
hamburger
Add Custom JavaScript
You can write your own logic or reuse the following lightweight solution:
<script nowprocket>
document.addEventListener('DOMContentLoaded', function () {
const hamburger = document.querySelector('.hamburger');
const header = document.querySelector('header');
if (!hamburger || !header) return;
hamburger.addEventListener('pointerdown', function () {
header.classList.toggle('is-open');
});
});
</script>The best place for this script is:
Elementor → Custom Code
There are two important details:
1. Use the nowprocket attribute
<script nowprocket>This prevents WP Rocket from delaying the script.
2. Load the script inside <head>
Set:
- Location:
<head> - Priority:
1
This ensures the interaction is available immediately after page load.
Add Custom CSS
At this point, the logic is ready and the remaining behavior can be handled with CSS.
You can place the CSS:
- in Elementor Custom Code
- or inside:
Header Template → Advanced → Custom CSS
/* Mobile menu hidden on frontend, but visible in Elementor editor */
body:not(.elementor-editor-active) selector .mobile_menu_content {
transform: translateY(-100%) translate3d(0,0,0);
-webkit-transform: translateY(100%) translate3d(0,0,0);
pointer-events: none;
}
/* Open mobile menu */
selector.is-open .mobile_menu_content {
transform: translateY(0) translate3d(0,0,0) !important;
-webkit-transform: translateY(0) translate3d(0,0,0) !important;
pointer-events: initial !important;
}
/* Prevent page scrolling while menu is open */
body:has(header.is-open) {
overflow: hidden;
}
/* Sticky header */
selector {
position: sticky;
top: 0;
z-index: 101;
}
/* Hide mobile menu in Elementor editor outside Header template (replace postid with your ID of the template) */
body.elementor-editor-active:not(.postid-15460) .mobile_menu_content {
display: none;
}
Important Notes
Avoid Elementor motion effects, scrolling effects, and other frontend animations whenever possible.
For example, instead of using Elementor’s built-in Sticky Effects, use simple CSS:
position: sticky;The goal is to keep the header independent from Elementor frontend JavaScript as much as possible.
This approach significantly reduces conflicts with:
- WP Rocket Delay JavaScript Execution
- Deferred JS loading
- Popup initialization timing
- CLS and frontend rendering issues
Final Result
By avoiding Elementor popups entirely, you get:
- Better compatibility with WP Rocket
- More stable mobile menu behavior
- Cleaner HTML structure
- Lower JavaScript overhead
- Improved Lighthouse and PageSpeed scores
- Better SEO and accessibility potential
Most importantly, the mobile menu becomes instantly interactive without depending on delayed Elementor popup scripts.
