Fixing Elementor Nav Menu Not Working with Lazy Loaded JavaScript (Rocket Loader / WP Rocket)

If you’re using Elementor’s Nav Menu widget and you’ve enabled JavaScript lazy loading via WP Rocket or similar tools (like Cloudflare Rocket Loader), you may run into a frustrating issue:

Your nav menu appears, but
Hover effects and hamburger menu don’t work, and dropdowns won’t open.

This happens because Elementor’s JavaScript — particularly the initialization of the menu widget — gets delayed and doesn’t run when expected.

Here’s a clean and reliable fix.👇

Fully Re-initialize All Elementor Widgets After Lazy Load

<script>
(function() {
    var maxWaitTime = 5000; // maximum 5 seconds
    var intervalTime = 100; // check every 100ms
    var waited = 0;

    var interval = setInterval(function() {
        if (typeof elementorFrontend !== 'undefined' && typeof elementorFrontend.init !== 'undefined') {
            console.log('Elementor frontend detected, full reinit...');
            jQuery.each(elementorFrontend.documentsManager.documents, function(id, document) {
                if (document && typeof document.container !== 'undefined') {
                    document.container.each(function() {
                        elementorFrontend.elementsHandler.runReadyTrigger(jQuery(this));
                    });
                }
            });
            clearInterval(interval);
            clearTimeout(timeout);
        } else {
            waited += intervalTime;
        }
    }, intervalTime);

    var timeout = setTimeout(function() {
        console.warn('Elementor frontend not ready after 5s, giving up.');
        clearInterval(interval);
    }, maxWaitTime);
})();
</script>

This script:

• Waits up to 5 seconds for Elementor’s elementorFrontend object to become available.
• Then manually triggers the initialization of each elementor widget.
• Prevents duplicate runs with clean-up logic.

Step 2: Fix Duplicate Arrow Icons in Dropdown Menus

Some sites end up showing two arrow icons (» » or ▼▼) next to each menu item with a dropdown. This is usually caused by both Elementor and your theme or a plugin (e.g., SmartMenus) injecting arrows.

Here’s the simple CSS fix:

.elementor-nav-menu .sub-arrow:nth-of-type(2) {
  display: none !important;
}

This ensures only the first arrow icon remains visible, hiding the duplicate.

Result

After adding both the script and the optional CSS fix:

• Your nav menu works on hover.
• Dropdowns open correctly.
• Mobile hamburger menu responds after first click.
• No duplicate arrow icons.