How To Use Menu Anchors (Page Scroll Navigation) Using Elementor

No extra plug-ins required! Elementor Free Compatible.

Open Elementor page builder in a page

Type 'menu' in Elementor panel and you will see several options.

Elementor Menu Anchor : Link to a Section

Drag and drop this option in your desired page section, let’s say we want it for “Our Clients” menu button

Elementor Menu Anchor : Link to a Section

Specify the menu anchoring link for the section you want to be scrolled upon

Elementor Menu Anchor : Link to a Section

Here we have given the menu anchor ID 'clients' so that we can assign this id to the desired button in our navigation menu, after entering the menu anchor ID, press 'update'.

Now go to the menu options in your WordPress admin panel

Elementor Menu Anchor : Link to a Section

The menu links are there and now we just have to enter the menu anchor IDs here to get this working.

Enter the assigned menu anchor IDs in menu links

Elementor Menu Anchor : Link to a Section

After entering the anchoring ID, press the 'Save Menu' button.

Go to your website and click on the menu button you just assigned an anchor link with

Elementor Menu Anchor : Link to a Section

Upon clicking on the menu link, the page will get a smooth scrolling effect to the anchor linked to that menu button.

Elementor Menu Anchor : Link to a Section

How to: Elementor link to anchor on another page

If you have a button or any other kind of link on a page of your website and you want it to be linked to a particular section of another page, we will show you how to implement this.

Here we have a button at our home page that will enable users to see pricing plans of the product.

Elementor Menu Anchor : Link to a Section

The product is displayed on another page within its details including pricing plans.

Elementor Menu Anchor : Link to a Section

The function of this button will be to redirect users to the product page and to the pricing section of that product page.

To do this, follow these steps:

Open Elementor Editor for the page where you want to be scrolled at

Scroll to the appropriate section.

Elementor Menu Anchor : Link to a Section

Just add the “Menu Anchor” option above your desired section

Elementor Menu Anchor : Link to a Section

Type the menu anchor ID, here we have used 'productpricing'

Elementor Menu Anchor : Link to a Section

After inputting the menu anchor ID, click 'Update'

Now we may close this page / tab and we just have to assign the link to that button on our front page.

Open the page with Elementor and scroll down to the element from where you want to be redirected to the section of another page

Elementor Menu Anchor : Link to a Section

Keeping it easy, you just have to specify the page URL of the desired page and put the menu anchor ID with '' symbol as shown below.

https://elementorcodes.com/elementor-not-loading/#update

After entering the link, you can optionally check the option 'open in new window'

Elementor Menu Anchor : Link to a Section

Click on 'Update' and visit your site

Click on the element you just linked with the section of another page

Elementor Menu Anchor : Link to a Section

and you will be scrolled down to the section of the page you just linked

Elementor Menu Anchor : Link to a Section

Hurray...!

How to offset menu anchor links

If you are using anchor links and you get upper part of your anchoring sections overlapped, then you can adjust this overlapping through offsetting by adding the CSS code in 'additional CSS' of your WordPress website.

Open the customizer of your WordPress site and select 'additional CSS'

Elementor Menu Anchor : Link to a Section
Elementor Menu Anchor : Link to a Section
Elementor Menu Anchor : Link to a Section

Add the following CSS code there

body:not(.elementor-editor-active) .elementor-menu-anchor:before {
content: "";
display:block;
height: 100px; /* fixed header height*/
margin: -100px 0 0; /* negative fixed header height */
visibility: hidden;
pointer-events: none;
}

You can change the '100px' and '-100px' to your preferred offset value.

Test the anchor link and its offset

Before Offsetting

Elementor Menu Anchor : Link to a Section

After Offsetting

Elementor Menu Anchor : Link to a Section

Works! With the CSS in the additional CSS area of the customizer, this change will be across your entire website. To use this on a single page, add the CSS to that page's settings custom CSS.

Et voila! Thanks for reading!
Let me know if you need help!

< News >

Get awesome new designs right in your inbox!

No spam, not more than one weekly email.

< Elements Finder>

Quickly search across all the main Elementor Addons.

< Recent Designs >
Change CSS of Elements by Using the Inspect Tool
Learn

Change CSS of Elements by Using the Inspect Tool

One of the most frequent request by people using Elementor is how to change the look of certain specific elements. And the most frequent answer is CSS.

The problem is that most people don't know how to properly use the Inspect function to target the right element, and modify the CSS. Here is how.

Read More »

Visit the Learning Center For More Designs !

Created by <Elementor Codes>