I’m currently developing a navigation menu in WordPress using Elementor and I’m facing some issues with the submenu behavior.
Here’s the setup: I have a primary menu labeled “Features” that includes a submenu item named “Community Feature”.
What I want to achieve:
If a user is on the All Features page and clicks on “Community Feature”, the page should smoothly scroll down to that section using the anchor link.
If the user is on a different page (like Home, About, or Contact), clicking on “Community Feature” should redirect them to the All Features page and then scroll down to that section as well.
Here’s what I’ve attempted:
Adding the anchor #community-feature - this only functions when I’m on the All Features page.
Using a full URL like https://mysite/all-features/#community-feature - this causes the page to reload even when I’m already on All Features, preventing the smooth scroll effect.
Is there a method to set this up correctly with Elementor? Perhaps with some JavaScript or an alternative way to configure the links?
easiest fix: use elementor’s motion effects with a basic jquery snippet. add data-menuanchor attributes to your sections, then catch menu clicks with $(document).on('click'). if window.location.href has your target page, prevent default and smooth scroll. if not, let it redirect. works great without extra tools or messy conditionals.
Use hash detection with proper URL structure. Set your submenu links to full URLs (https://mysite.com/all-features/#community-feature) and add a script that intercepts clicks. The trick is checking location.hash when the page loads. If someone lands on your Features page with a hash, trigger the scroll after a short delay so everything loads first. For same-page navigation, stick with relative anchors (#community-feature) - they work fine when you’re already on the page. I solved this with two menu setups: relative anchors on the Features page itself, full URLs everywhere else. Elementor’s dynamic conditions make it easy without messing up your design.
Been there, done that. Manual JavaScript navigation is a nightmare to maintain and breaks every time you update themes or plugins.
I solved this exact problem with Latenode on several client sites. Set up a webhook that catches navigation clicks, checks the current URL, and handles everything automatically.
Here’s what happens:
User clicks “Community Feature” anywhere on your site
Latenode gets the click data and current page info
On Features page: smooth scrolls to anchor
On different page: redirects to Features page with scroll trigger
No reloads, no broken animations
Best part? You can handle dozens of menu items across your whole site without writing any code. I manage navigation for 15+ WordPress sites this way.
Works with any theme or page builder, not just Elementor. Takes 10 minutes to set up and runs forever.
Dealt with this same nightmare last year on a client site. You need conditional JavaScript that checks window.location.pathname before doing anything with scroll. Make a script that detects if you’re already on the target page. If you are, block the default link and use scrollIntoView() with smooth behavior. If you’re on a different page, just let the URL redirect work normally. I put this in a function that runs on DOMContentLoaded and hooked it to all nav anchor links. The magic is using event.preventDefault() only when you’re already on the right page - otherwise let the browser handle redirects. Works great with Elementor’s menu widget and won’t break when WordPress updates or you switch themes. Way more reliable than using external services for basic nav stuff.