Elementor makes it easy to build interactive, one-page websites with smooth scrolling. In this guide, you'll learn how to use the menu anchor widget in Elementor to link different sections of a page seamlessly. Whether you're creating a landing page, a portfolio, or a full one-page layout, anchor navigation helps improve user experience and navigation flow.
How to Add Menu Anchor in Elementor
The Menu Anchor widget lets you mark specific parts of your page to jump to when a link is clicked. It's a foundational element for enabling smooth, in-page navigation without reloading the page.
- Open the page in Elementor editor.
- Drag the Menu Anchor widget from the widget panel to the section you want to link to.
- In the widget settings, assign a unique ID (e.g., "services", "about").
- Place the anchor at the top of your section for the best visual result.
How to Link to a Section in Elementor
Once you've added anchor IDs, you can create internal links to scroll to those sections from any widget that allows URL input.
- In a button or menu item, use #anchor-id as the URL (e.g.,
#about). - Make sure the anchor ID matches exactly with what's set in the Menu Anchor widget.
- This works for both buttons, nav menus, and links within text.
- You can also link to anchors from other pages by adding the full page URL followed by the anchor (e.g.,
https://example.com/#services).
Enabling Smooth Scrolling in Elementor
Elementor enables smooth scrolling by default when linking to anchor IDs. This creates a seamless visual transition between sections. However, performance or theme conflicts may affect behavior.
Steps to ensure smooth scrolling:
- Use Elementor's native Menu Anchor widget for anchors.
- Do not use plugins that override scrolling behavior unless configured correctly.
- Check if the header is overlapping the section—adjust anchor position if needed.
- Preview and test your links on both desktop and mobile devices to ensure consistent behavior.
Customize Anchor Positions in Elementor
When using a sticky header, anchor links might scroll too far or get hidden behind the menu. You can offset anchor positions to avoid this and ensure content is visible.
- Add padding to the top of the section containing the anchor.
- Use custom CSS to scroll slightly past the anchor point.
- For more control, use JavaScript to dynamically offset scroll positions based on header height.
How to Create a One-Page Website with Elementor
A one-page website uses anchor links instead of separate pages. It's ideal for portfolios, single-product showcases, or promotional campaigns. Here's how to set one up:
- Design your sections in a single Elementor page (e.g., Home, About, Services, Contact).
- Add Menu Anchor widgets to each section, right above the content block.
- Use Elementor's nav menu or buttons to link to anchors.
- Assign your nav menu in the header via Elementor navigation menu setup.
- Test the layout on mobile and adjust anchor positions as needed to prevent overlap or spacing issues.
Using this structure creates an intuitive scrolling experience and reduces page load times.
Set Up Anchor Links in Elementor Header
To use anchor links in a sticky or global header, configure your nav menu to reference anchor IDs rather than full URLs. This ensures smooth scrolling behavior within the page.
- Edit the header template in Elementor.
- Set the menu items to link to anchor IDs (e.g.,
#contact). - Ensure each ID matches a Menu Anchor placed lower on the same page.
- Use Elementor's "Anchor Scrolling" option in nav settings to fine-tune scroll timing and speed.
Troubleshooting Anchor Links Not Working
If anchor links don't scroll or behave unexpectedly, check the following common problems and solutions:
| Issue | Fix |
|---|---|
| Anchor not found | Ensure the Menu Anchor widget is added with correct ID |
| Header overlaps content | Add padding or use offset scroll with custom CSS |
| Link doesn't scroll | Use #id format in links; avoid full URLs for internal anchors |
| Mobile scroll issue | Disable conflicting mobile plugins or optimize the layout in responsive view |
Elementor Anchor Navigation Best Practices
Use unique IDs. Don't repeat anchor names across sections to avoid navigation errors.
Keep anchor names short. Simple, one-word names work best (e.g., #about, #contact).
Test on mobile. Anchor behavior can differ on smaller screens due to dynamic header sizes.
Combine with scrolling animations. Create a visually smooth user journey by pairing anchors with scroll effects.
Limit the number of anchors. Too many anchors can clutter your navigation and confuse users.
Useful Links
How to Use the Menu Anchor Widget – Learn how to add and configure the Menu Anchor widget in Elementor to create smooth in-page navigation.
Creating Anchor Links – Step-by-step guide on setting up anchor links within your Elementor pages for seamless scrolling.
Elementor 3.25: Anchor Offset Control – Discover the new Anchor Offset feature in Elementor 3.25 that allows precise control over scroll positions, especially useful with sticky headers.
How to Make a One Page Website – Learn how to structure a one-page website using anchor links for improved user experience and navigation.
Nav Menu Widget (Pro) – Understand how to use the Nav Menu widget in Elementor Pro to link menu items to anchors within the same page.
Enhance Your Elementor with Powerful Widgets!
Elfsight created dozens of useful widgets to make your website more attractive and boost its performance in so many ways. Try these no-code solutions for free on Elementor!
Conclusion
Using menu anchors in Elementor helps create clean, intuitive navigation for one-page websites or long landing pages. By setting up Menu Anchor widgets, linking correctly, and customizing scroll behavior, you can enhance your website's usability and flow. This functionality supports better user engagement and a professional appearance. Practice these best practices to make your Elementor designs more engaging, accessible, and user-friendly across devices.
