August 17, 2023

Set up a Responsive Elementor Menu Anchor for One Page Designs

Play Video
Tutorial Walkthrough
This video tutorial provides an in-depth walkthrough, and we recommend following along with the video to grasp the concept fully. Below, you'll find a summary of the tutorial, but please note that it may leave out some detailed steps, so watching the video will give you the most comprehensive understanding.

Creating an Elementor menu anchor can transform the way visitors navigate your website, making it a seamless and enjoyable experience. Imagine you’re reading a book, and you have those colorful little sticky tabs to mark your favorite pages. That’s what a jump or anchor menu does for your website.


The Basics of Creating an Elementor Menu Anchor

An anchor menu acts as a quick navigation tool, allowing visitors to jump to specific sections without the need for endless scrolling.

Setting the Foundation:

  1. Design Your Page
    Think about the layout of your page. Common sections might include ‘About’, ‘Services’, and ‘Contact’.
  2. Assign IDs to Sections
    Every section needs a unique identifier. Click on the desired section, head to ‘Advanced’, and assign it an ID. For instance, for the About section, you might use ‘about’.

Crafting a Menu Anchor for Your Desktop Version

With our sections ready, it’s time to guide our visitors with a sleek menu.

Steps to Navigate:

  1. Navigate to the Menus
    On your WordPress dashboard, head to ‘Appearance’ and then ‘Menus’.
  2. Menu Creation
    Create a new menu and give it a name, something memorable, perhaps ‘JumpMenu’.
  3. Add Custom Links
    Add custom links and add the previously assigned IDs, prefixed with a ‘#’. So, for the About section, it’ll be ‘#about’.
Label URL
About Us #about
Our Services #services
Contact #contact
  1. Header Positioning
    Ensure this menu is visible on your page by navigating to ‘Templates’, then ‘Theme Builder’, and integrate the menu widget into your header template.

Designing an Elementor Anchor Menu for Mobile

Mobile users deserve a seamless experience. Let’s craft a slide-out menu tailored for them.

Mobile Menu Creation:

  1. Create a Pop-Up
    ¬†Go to ‘Templates’ followed by ‘Pop-ups’. Create a new one.
  2. Design your Popup
    Add a background, tweak the width, and decide the slide-out direction. Remember to adjust the animation speed to your liking.
  3. Menu Integration
    Insert the menu widget and style it. Ensure it’s mobile-friendly by using the mobile view.
  4. Add a Button
    Go to your header template and add a button widget. Style it as you please and select to open the popup you just created. This ensures that when users click the button, the slide-out menu popup appears. You can additionally add dynamic conditions to show/hide either menu as you wish.

Fixing the Elementor Popup Behaviour

Sometimes, when users click on a link in the slide-out menu, it doesn’t behave as expected. Instead of smoothly navigating to the desired section, nothing happens. Let’s ensure our anchor links work flawlessly and address this hiccup.

The Fix:

  1. Code Snippet Addition
    Head to ‘Elementor’ and then ‘Custom Code’. Add a new snippet.
  2. Code Insertion
    Embed the provided code snippet, adjusting the template ID to correspond with your pop-up’s ID.

    <script type="text/javascript">
    
        jQuery( document ).ready( function( $ ) {
    
            jQuery( document ).on( 'elementor/popup/show', ( event, id, instance) => {
    
                
                if(id !== 343){
                    return;
                }
                
                let clickTarget;
                
                if($('.lytbox-jump-menu .menu-item').length){
    
                    clickTarget = '.lytbox-jump-menu .menu-item';
                }
    
                if($('.lytbox-jump-menu .elementor-icon-list-item').length){
    
                    clickTarget = '.lytbox-jump-menu  .elementor-icon-list-item';
                }
                
                if($('.lytbox-jump-menu .elementor-button-link').length){
    
                    clickTarget = '.lytbox-jump-menu  .elementor-button-link';
                }
    
                
                $( document ).on( 'click',clickTarget, function( event ) {
    
    
                    elementorProFrontend.modules.popup.closePopup( {id: id}, event )
    
                });
    
            } );
    
        });
    
    
    </script>

    Source: Lytboxacademy


Additional Tips

  • Consistency is Key
    Ensure that the design, colors, and fonts of your anchor menu match the overall theme of your website. This provides a cohesive look and feel.
  • User Testing
    Once you’ve set up your menu anchor, it’s a good idea to test it out with a few users. This can provide insights into any potential issues or areas of improvement.
  • Regular Updates
    Technology and design trends change. Regularly revisit and update your anchor menu to keep it fresh and in line with current best practices.

Conclusion

Setting up a responsive Elementor menu anchor not only enhances the user experience but also adds a touch of professionalism to your website. By following the steps outlined above, you’ll be well on your way to providing an intuitive navigation system for your visitors. Remember, the key is to keep the user in mind at all times. Happy designing!

Required Resources

Elementor Logo
Free Options
Credit to Jeffrey at Lytbox
Jeffrey's Lytbox Studio is a YouTube channel dedicated to empowering aspiring website creators by offering web design tutorials, insights into the business side of web design, and fostering creativity and skill development. With a strong focus on Elementor, Jeffrey shares his journey from a techno-dinosaur to a successful freelancer and design studio owner, aiming to inspire and educate others in their quest for freedom and purpose through the world of web design.
Visit
Set up a Responsive Elementor Menu Anchor for One Page Designs
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Menu
Give Feedback
Describe your feedback *
Rate Helwp
Share
Facebook
Twitter
LinkedIn
Reddit
Email
WhatsApp
Telegram
Pocket
Report
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.