How to Highlight Menu Items Based on Section Visibility in Elementor

In this guide, you’ll learn how to create a menu that highlights items as their corresponding sections come into view. This effect enhances user experience by providing visual feedback on the user’s current section within the page. We will use Elementor for layout design and custom JavaScript for functionality.

Prerequisites

1. Basic understanding of HTML, CSS, and JavaScript.
2. A WordPress site with Elementor installed.
3. Familiarity with Elementor’s interface.

Step-by-Step Guide

Step 1: Create Sections in Elementor

First, create the sections you want to link in your menu.

1. Open Elementor: Edit the page where you want to apply this effect.
2. Add Sections: Create multiple sections corresponding to different parts of your content. Each section should have a unique ID. For example:
   • #About
   • #Clients
   • #Contact
3. Set Section IDs: Click on each section and set its HTML ID in the advanced tab.

Step 2: Create a Menu in Elementor

1. Add Menu Widget: In the Elementor editor, drag and drop a ‘Menu’ widget to the desired location, typically a sidebar or header.
2. Customize Menu:
   • Add menu items corresponding to each section.
   • Use the # followed by the section ID as the link. For example, for the AI & Machine Learning section, the link should be #AI-Machine.

Step 3: Add Custom JavaScript

Elementor allows you to add custom JavaScript directly to your page. Here’s how you can do it:

1. Open Elementor Settings: Click on the hamburger menu in the top left corner and navigate to Site Settings.
2. Custom Code: Go to the Custom Code section and add the following JavaScript:

<script>
document.addEventListener('DOMContentLoaded', function() {
    const sections = document.querySelectorAll('section');
    const navLinks = document.querySelectorAll('.your-menu-class a');

    function highlightMenuItem() {
        let index = sections.length;

        while (--index && window.scrollY + 50 < sections[index].offsetTop) {}

        navLinks.forEach((link) => link.classList.remove('active-link'));
        navLinks[index].classList.add('active-link');
    }

    highlightMenuItem();
    window.addEventListener('scroll', highlightMenuItem);
});
</script>

Replace .your-menu-class with the class of your menu container.

Step 4: Style the Active Link

To visually differentiate the active menu item, add some custom CSS.

1. Custom CSS: Add the following CSS either in the Customizer or directly in your Elementor settings under Custom CSS:

<style>
.active-link {    color: #f00; /* Highlight color */
    font-weight: bold; /* Make it bold */
    border-bottom: 2px solid #f00; /* Underline */
}
</style>

You can customize the styles to match your website’s design.

Step 5: Test Your Implementation

1. Save and Preview: Save your changes and preview the page.
2. Scroll: As you scroll through the page, the corresponding menu item should highlight.

Additional Tips

1. Smooth Scrolling: For a smoother user experience, enable smooth scrolling. You can add this CSS:

html {
    scroll-behavior: smooth;
}

2. Debounce Function: If your page has a lot of content or images, consider debouncing the scroll event to improve performance:

function debounce(func, wait = 20, immediate = true) {
    let timeout;
    return function() {
        let context = this, args = arguments;
        let later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        let callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
}

window.addEventListener('scroll', debounce(highlightMenuItem));

Conclusion

By following this guide, you can create a dynamic menu that enhances user navigation on your Elementor-based website. Highlighting menu items based on section visibility provides a clear indication of the user’s current location on the page, improving the overall user experience. Happy designing!