,

Menu Anchors in Elementor

Name Anchors in Elementor

Share This Post

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp

Table of Contents

Elementor Logo

In this WPDesigns article, we will discuss how to Add menu anchors in Elementor.

Do you want to add menu anchor links to your website using Elementor in the easiest way possible? So, you’re on your way to finding a suitable solution!

With a drag-and-drop page builder like Elementor, creating web pages becomes faster, smarter and more versatile. Elementor is much more user-friendly than related WordPress plugins when it comes to building menu anchor tags.

The Menu Anchor Widget in Elementor

Creating a Menu Anchor in Elementor Using a Widget

You can add Menu Anchors in several ways in Elementor, this first way we will show you how to do using the Elementor Menu Anchor Widget. Click this Menu Anchor embed as a hyperlink to skip to the CSS ID!

Go to your WordPress > Dashboard > Pages > Edit with Elementor to open the page. Then use the left-hand site’s widget search bar to search for menu anchor. You can either search visually or type “anchor” into the widget search bar.

Menu Anchors In Elementor
Menu anchor widget in Elementor
Adding Anchor Id In Menu Anchor Widget
Adding anchor ID in menu anchor widget

Go to your dashboard and then Elementor to open the page. Then use the left-hand site’s widget search bar to search for menu anchor. After that, simply drag and drop the menu anchor widget to the desired position. 

The ID of Menu Anchor can be placed under anchor on the left-hand side. Give it a name, and that’s all there is to it. (Please note that the ID link only accepts the following characters: A-Z, a-z, 0-9, _, -).

Linking the Menu Anchor

Once you have entered your Menu Anchor using either the CSS ID or the Elementor widget by adding it into the “The ID of the Menu Anchor” you can now link it to the hyperlink, button, or image.

The page menu anchor is essentially added in the place that you would normally add a hyperlink.

You can now link this page menu anchor, to do this you will need to add a hash symbol before # it then add the text exactly as it is presented in the text box.

For example, if you have used the CSS ID of “About”; you will need to set the link as “#About”. You can then save or update the link and it will slide to the page or position on the page you linked it to.

How To Link Anchor Id To Button
Adding a Anchor Link to a button
Adding Anchor Link In Menu Item
Adding an anchor link in the WordPress Menu

Possible Problems
(& Solutions)

When setting up your page anchor there are several common issues that may arise and there is generally an easy solution. If you do not find your solution here feel free to send a message and explain the issue and we can see if we can help you.

Page Anchor not working

You may find that your page anchor does… nothing! If this is the case then make sure to check that every thing is correct.  The original link should not have a # next to it, only the place that is clickable and that will go the link.  If there is a capital letter in one and not the other, if there is a spelling mistake, if there is a # or if there is a # missing on the clickable link then nothing will happen as it is not correctly linked.

Page Anchor not changing page

You added a link on one page and put the link on another, the link however does not go to the desired page.

This one is generally an easy fix, you will need to enter in the rest of the URL into the link box or menu item.  

For example, if it changes page, it needs to have the page website address before.  If linking to “FAQs” on another page, then this would need the URL before it – https://wpdesigns.co.uk/contact/#FAQs

Need to Get to The Top Quickly?

A page anchor can help with that!

Search

Social Media

Recent Posts

Josh

Typically replies in minutes

Hi there,

Feel free to message me if you have any questions.