“`html

Elementor Anchor Link Not Working? Fix It

Are you building a beautiful landing page or a lengthy blog post with Elementor, aiming to guide your visitors smoothly through different sections using anchor links, only to find them… well, not working? It’s a common frustration, but don’t worry, you’re in the right place! An Elementor anchor link not working can interrupt the user experience and make your carefully crafted page feel less professional.

Anchor links (also known as jump links or page bookmarks) are fantastic for improving navigation on long pages. They allow users to click a link and instantly scroll to a specific section without manually scrolling. When your Elementor anchor link isn’t working as expected, it can be a minor headache, but thankfully, most issues are straightforward to diagnose and fix. In this comprehensive guide from Hostinger, we’ll walk you through multiple solutions, step-by-step, to get your Elementor anchor links working perfectly again!

Why is Your Elementor Anchor Link Not Working? Understanding the Basics

Before diving into solutions, let’s briefly recap how Elementor anchor links are supposed to function. They rely on two main components:

1. The Target (Anchor ID): This is the specific section on your page you want users to jump to. In Elementor, you assign a unique ID to a section, column, or widget.
2. The Link (Anchor URL): This is the clickable text or button that, when clicked, directs users to the target ID. The link usually looks like #your-unique-id.

When an Elementor anchor link isn’t working, it usually boils down to a mismatch, a typo, a caching issue, or a conflict. Let’s explore the common culprits and how to tackle them.

Solution 1: Double-Check Your Anchor ID and Link URL

This might seem obvious, but a simple typo is often the root cause of an Elementor anchor link not working. It’s the digital equivalent of trying to open a locked door with the wrong key!

Step-by-Step Verification for Elementor Anchor Links

1. Verify the Anchor ID on Your Target Section/Widget

1. Open your page in Elementor.
2. Navigate to the section, column, or widget you want your anchor link to point to.
3. Click on the element to select it.
4. Go to the Advanced tab in the Elementor panel.
5. Find the CSS ID field. This is where your unique anchor ID should be.
6. Ensure the ID is:
   • Unique: No two IDs on the same page should be identical.
   • Lowercase (recommended): While not strictly enforced by all browsers, using lowercase and avoiding special characters (except hyphens or underscores) is good practice.
   • No spaces: Use hyphens (-) instead of spaces.
   • No leading numbers: An ID should start with a letter.
7. Copy this ID exactly as it appears.
8. For example, if your section ID is features-section.

2. Verify the Link URL on Your Anchor Link

1. Navigate to the text, button, or icon where you’ve set up your anchor link.
2. Click on the element to select it.
3. In the Content tab (or Style/Advanced depending on the widget), locate the Link field.
4. Enter the link as #your-unique-id. The crucial part here is the hash symbol (#) followed immediately by the exact ID you copied from the target section.
5. For example, if your section ID is features-section, your link should be #features-section.
6. Important: If your anchor link is pointing to a section on a different page, the link should be https://yourwebsite.com/your-page/#your-unique-id. Make sure the page URL is correct too.

After making any corrections, remember to Update the page in Elementor and check if your Elementor anchor link not working issue is resolved.

Solution 2: Clear Caching – Browser, Plugin, and Server

Caching is a fantastic way to speed up your website, but it can often hide recent changes, making it seem like your Elementor anchor link isn’t working even after you’ve corrected it. This is a very common scenario.

Step-by-Step Caching Clearance

1. Clear Browser Cache

Your web browser stores temporary files to load websites faster. If you’ve recently made changes, your browser might still be serving an older version of your page.

• Windows/Linux: Ctrl + Shift + R (Hard Refresh) or Ctrl + Shift + Del (Clear browsing data).
• macOS: Cmd + Shift + R (Hard Refresh) or Cmd + Shift + Delete (Clear browsing data).
• Alternatively, try opening your website in an Incognito/Private browsing window to bypass the cache.

2. Clear Elementor Cache

Elementor has its own cache to optimize performance.

1. From your WordPress dashboard, navigate to Elementor > Tools.
2. Under the General tab, find Regenerate CSS & Data.
3. Click the Regenerate Files button.
4. Then, go to the General tab again and click on Sync Library. This helps ensure Elementor’s internal data is up-to-date.

3. Clear WordPress Caching Plugin Cache

If you’re using a caching plugin (like WP Rocket, LiteSpeed Cache, W3 Total Cache, etc.), it needs to be flushed. The process varies slightly by plugin, but usually, there’s a “Clear Cache” or “Purge All Caches” option in the plugin’s settings or an admin bar shortcut.

Example (WP Rocket): Go to WP Rocket > Dashboard and click Clear Cache.

Example (LiteSpeed Cache): Look for the LiteSpeed Cache icon in your WordPress admin bar and select Purge All.

4. Clear Server-Side Cache (if applicable)

Some hosting providers (like Hostinger!) offer server-level caching. If you’re on such a host, you might need to clear this cache as well. This is usually done through your hosting control panel (e.g., hPanel, cPanel).

Hostinger customers: Log in to your hPanel, go to WordPress > Cache, and click Purge All.

After clearing all relevant caches, re-check your page. This often solves the ‘Elementor anchor link not working’ issue instantly.

Solution 3: Address Plugin and Theme Conflicts

WordPress is a modular system, and sometimes, plugins or even your theme can inadvertently interfere with Elementor’s functionality, leading to an Elementor anchor link not working. This is particularly true for plugins that manipulate JavaScript or add their own scrolling effects.

Step-by-Step Troubleshooting for Conflicts

1. Perform a Conflict Test

The most reliable way to identify a conflict is to systematically disable plugins and switch themes.

1. Backup Your Website: Before doing any of this, always create a full backup of your website. Hostinger provides easy backup options in hPanel. Also, tools like UpdraftPlus are excellent for WordPress backups.
2. Switch to a Default WordPress Theme: Go to Appearance > Themes and activate a default WordPress theme like Twenty Twenty-Four.
3. Test: Check if your Elementor anchor link is working with the default theme.
   • If it works: Your theme is likely causing the conflict. Contact your theme developer for support or look for theme updates.
   • If it still doesn’t work: Proceed to the next step.
4. Deactivate Plugins: Go to Plugins > Installed Plugins.
5. Deactivate all non-Elementor related plugins. Only keep Elementor and Elementor Pro (if you have it) active.
6. Test: Check if your Elementor anchor link is working.
   • If it works now: One of your deactivated plugins is the culprit. Reactivate them one by one, testing the anchor link after each activation, until you find the conflicting plugin. Once identified, look for an alternative, contact the plugin developer, or report the issue.
   • If it still doesn’t work: The issue might be deeper, possibly related to Elementor itself, JavaScript errors, or your WordPress setup.

Remember to revert to your original theme and reactivate all necessary plugins after the test.

2. Update Everything

Outdated software can lead to compatibility issues. Ensure everything is up-to-date:

• Elementor and Elementor Pro: Always use the latest versions.
• WordPress Core: Keep your WordPress installation updated.
• Theme: Make sure your active theme is updated to its latest version.
• All Plugins: Update all other plugins, especially those related to caching, page building, or custom JavaScript.

You can check for updates under Dashboard > Updates in your WordPress admin area.

Solution 4: Inspect for JavaScript Errors

JavaScript errors on your page can prevent Elementor’s scrolling functionality from working correctly, causing your Elementor anchor link not working behavior. These errors are usually invisible to the user but can be found using browser developer tools.

Step-by-Step JavaScript Error Inspection

1. Open Browser Developer Tools

• Google Chrome: Right-click anywhere on your page and select Inspect, then go to the Console tab.
• Mozilla Firefox: Right-click and select Inspect Element, then go to the Console tab.
• Safari: Go to Safari > Preferences > Advanced and check “Show Develop menu in menu bar.” Then, go to Develop > Show JavaScript Console.

2. Look for Errors

Once the console is open, refresh your page. Look for any red error messages. These indicate JavaScript errors.

• If you see errors, try to identify if they are related to a specific plugin or theme.
• Often, the error message will provide a file path (e.g., /wp-content/plugins/some-plugin/js/script.js) that can help pinpoint the source.

3. How to Act on Errors

• If an Elementor anchor link is not working due to an error caused by a plugin, try deactivating that plugin (refer to Solution 3).
• If it’s theme-related, consider switching themes or contacting your theme developer.
• Sometimes, a simple update (Elementor, theme, plugins) can resolve these conflicts.
• If the error seems to be coming directly from Elementor, ensure you’ve regenerated Elementor’s CSS and data (Solution 2).

Solution 5: Custom JavaScript for Smooth Scrolling (Advanced)

While Elementor typically handles smooth scrolling for anchor links by default, sometimes, especially with certain themes or if you desire a very specific scroll behavior, adding custom JavaScript can be a viable solution if your Elementor anchor link is not working or if you want to enhance its native behavior.

Disclaimer: This solution requires a basic understanding of JavaScript. Always backup your site before adding custom code.

Step-by-Step Custom JavaScript Implementation

1. Add the JavaScript Code

You can add custom JavaScript in a few ways:

Option A: Using Elementor’s Custom Code Feature (Elementor Pro Required)

1. Go to Elementor > Custom Code in your WordPress dashboard.
2. Click Add New.
3. Give it a title (e.g., “Smooth Scroll”).
4. Set the location to <body> end for best practice.
5. Paste the following code:

   <script>
   document.querySelectorAll('a[href^="#"]').forEach(anchor => {
       anchor.addEventListener('click', function (e) {
           e.preventDefault();
   
           document.querySelector(this.getAttribute('href')).scrollIntoView({
               behavior: 'smooth'
           });
       });
   });
   </script>

6. Click Publish.

Option B: Using a Plugin like “Code Snippets”

1. Install and activate the Code Snippets plugin.
2. Go to Snippets > Add New.
3. Paste the same JavaScript code as above, without the <script>...</script> tags.
4. Set the snippet to run “Only on site front-end” or “Run snippet everywhere.”
5. Activate the snippet.

Option C: Via your Child Theme’s functions.php (for advanced users)

Add this within the functions.php file of a child theme (never directly to the parent theme, as updates will overwrite it):

<?php
function custom_smooth_scroll_script() {
    ?>
    <script>
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();

            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        });
    });
    </script>
    <?php
}
add_action('wp_footer', 'custom_smooth_scroll_script');
?>

2. Clear Cache and Test

After adding custom JavaScript, always clear all types of cache (browser, plugin, server) as described in Solution 2, then test your Elementor anchor link again.

Solution 6: Check Elementor’s Default Anchor ID Widget

Elementor offers a specific widget for creating anchor points, which can be simpler and sometimes more robust than manually assigning CSS IDs to sections or widgets, especially if your Elementor anchor link is not working with the latter method.

Step-by-Step Using the Elementor Menu Anchor Widget

1. Add the Menu Anchor Widget

1. Open your page in Elementor.
2. Search for the “Menu Anchor” widget in the Elementor panel.
3. Drag and drop the Menu Anchor widget