Elementor’s Off-Canvas widget is a great tool for creating slide-out menus, but there’s one frustrating issue: anchor links don’t close the menu when clicked. Instead of smoothly navigating to the target section, the Off-Canvas menu stays open, blocking the content.

This is a known problem that many Elementor users have struggled with. We spent hours searching for a fix—some methods used to work but eventually broke. After extensive testing, we finally found a JavaScript fix that actually works.

If you’re using Elementor Off-Canvas and your anchor links aren’t closing the menu, here’s exactly how to fix it.

The Problem: Anchor Links Won’t Close the Off-Canvas Menu

By default, when you click an anchor link inside the Off-Canvas menu, Elementor:

1. Scrolls to the section on the page.
2. Keeps the menu open, covering the content.

Users expect the menu to close before scrolling to the anchor, but Elementor doesn’t handle this automatically.

This issue also existed with Elementor Popups, which many users used for slide-out menus before Off-Canvas was introduced. If you’re still using Popups for navigation, consider switching to Off-Canvas—but either way, you’ll still need this fix.

The Fix: Make Off-Canvas Anchor Links Close Before Scrolling

This JavaScript fix ensures that when an anchor link is clicked inside an Off-Canvas menu, Elementor will:
✅ Close the menu first
✅ Then scroll smoothly to the correct section

Copy & Paste This Code Into Your Site

<script>
document.addEventListener("DOMContentLoaded", function () {
    document.addEventListener("click", function (event) {
        // Check if the clicked element is an anchor link inside an open Off-Canvas
        const anchor = event.target.closest('a[href*="#"]:not([aria-haspopup="true"])');
        const offCanvas = document.querySelector('.e-off-canvas[aria-hidden="false"]');

        if (anchor && offCanvas) {
            event.preventDefault(); // Prevent default anchor behavior

            // Get the target section from the anchor href
            const targetID = anchor.getAttribute("href").split("#")[1];
            const targetElement = document.getElementById(targetID);

            // Close the Off-Canvas menu
            const closeButton = document.querySelector('.e-off-canvas__overlay, .dialog-close-button');
            if (closeButton) {
                closeButton.click();
            }

            // Wait for the menu to close before scrolling
            setTimeout(() => {
                if (targetElement) {
                    const headerOffset = 100; // Adjust for sticky headers
                    const elementPosition = targetElement.getBoundingClientRect().top + window.scrollY;
                    const offsetPosition = elementPosition - headerOffset;

                    window.scrollTo({
                        top: offsetPosition,
                        behavior: "smooth"
                    });
                }
            }, 300); // Adjust timing to match animation speed
        }
    });
});
</script>

If you’re still using Popups, consider migrating to Off-Canvas for a better experience—but either way, apply this fix to make anchor links work correctly.

Using Elementor Popups? Here’s How to Fix Anchor Links There Too

While we recommend switching to the Off-Canvas widget for better navigation performance, some users may prefer to stick with Elementor Popups for their slide-out menus.

If that’s you, you’ve probably run into the same issue:
❌ Clicking an anchor link inside a Popup doesn’t close the Popup.
❌ The page scrolls to the section, but the Popup remains open, blocking content.

After testing multiple fixes, we’ve found a JavaScript solution that actually works for Popups.

Copy & Paste This Code Into Your Site

<script>
document.addEventListener("DOMContentLoaded", function () {
    document.addEventListener("click", function (event) {
        // Exclude clicks on the popup trigger (like the hamburger menu button)
        if (event.target.closest('.elementor-button, .menu-toggle, .popup-trigger')) {
            return;
        }

        // Check if the clicked element is an anchor link inside an open Popup
        const anchor = event.target.closest('.elementor-popup-modal[aria-modal="true"] a[href*="#"]:not([aria-haspopup="true"])');
        const popup = document.querySelector('.elementor-popup-modal[aria-modal="true"]');

        if (anchor && popup) {
            event.preventDefault(); // Prevent default anchor behavior

            // Get the target section from the anchor href
            const targetID = anchor.getAttribute("href").split("#")[1];
            const targetElement = document.getElementById(targetID);

            // Close the Popup
            const closeButton = popup.querySelector('.dialog-close-button.dialog-lightbox-close-button');
            if (closeButton) {
                closeButton.click();
            }

            // Wait for the popup to fully close before scrolling
            setTimeout(() => {
                if (targetElement) {
                    const headerOffset = 100; // Adjust for sticky headers
                    const elementPosition = targetElement.getBoundingClientRect().top + window.scrollY;
                    const offsetPosition = elementPosition - headerOffset;

                    window.scrollTo({
                        top: offsetPosition,
                        behavior: "smooth"
                    });
                }
            }, 500); // Adjust timing to match popup exit animation duration
        }
    });
});
</script>

How to Add This Fix to Your Website

1. Add the JavaScript Code to Your Site

✅ Method 1: Using an HTML Widget (Recommended)

• In Elementor, open your template with the Off-Canvas element or Popup.
• Drag in an HTML widget anywhere inside the template.
• Paste the JavaScript fix inside the HTML widget.
• Save and test your navigation.

✅ Method 2: Using Custom Code (Elementor Pro)

• Go to Elementor > Custom Code.
• Click Add New → Set it to load in the footer.
• Paste the JavaScript fix and save.

✅ Method 3: Enqueue a JavaScript File (For Developers & Custom Themes)

If you prefer a more structured approach, enqueue the script in your theme’s functions.php by adding:

function custom_enqueue_scripts() {
    wp_enqueue_script('custom-elementor-fix', get_template_directory_uri() . '/js/elementor-fix.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');

Then, create a file named elementor-fix.js inside your theme’s /js/ folder and paste the JavaScript fix inside it.

2. Adjust for Your Site

• Sticky Header? Adjust const headerOffset = 100; to match its height.
• Popup Close Animation Delay? If your popup has a long close animation, increase setTimeout(() => { ... }, 500); to match the duration.

3. Test Your Anchor Links

• Open your Popup menu and click an anchor link.
• The popup should close first, then smoothly scroll to the section.

Why This Fix Works When Others Fail

We tested multiple fixes before landing on this one. Here’s why other common solutions didn’t work:

❌ CSS-Only Fixes – Some users tried :target selectors, but they didn’t properly close the menu before scrolling.
❌ Other JavaScript Workarounds – Many relied on .e-off-canvas[aria-hidden="false"], but failed to account for timing issues.
✅ Our Fix properly detects anchor clicks, closes the menu, and then scrolls smoothly.

Final Thoughts: Off-Canvas vs. Popups—Which One Should You Use?

If you’re still using Elementor Popups for navigation, this JavaScript fix will solve the anchor link issue. However, for a better experience, we still recommend switching to Off-Canvas, since:

🔹 Off-Canvas is designed for menus → Popups weren’t built for navigation.
🔹 Better performance → Off-Canvas loads faster than Popups.
🔹 Easier customization → Works natively with Elementor’s Menu widget.
🔹 No extra bloat → Popups require more CSS/JavaScript.

But if you prefer sticking with Popups, now you have a reliable solution to ensure anchor links work the way they should.

If you found this guide helpful, let us know in the comments! 🚀