Menu Anchor Element

27/02/2019

The Menu Anchor Element is a very simple element, that allows you to add a menu anchor (anchor id) anywhere on your page. By adding an anchor id, and then setting up an anchor link somewhere else on the page, people can click on the anchor link and be taken directly to the section with the anchor id.  See below to read more about this handy element.

Read all about Anchor Scrolling Here.

How to use the Menu Anchor Element

Using the Menu Anchor Element allows you to target a specific section of the page. For example, if you'd like to target specific content, then you would place a Menu Anchor element directly above it. That way, the user scrolls directly to the content you'd like them to see rather than just the beginning of the section it's part of.

Step 1 – Create a new page or post, or edit an existing one.

Step 2 - Add your content as normal then determine the content on the page you'd like to target.

Step 3 - Now we need to add the Menu Anchor element. To do this, add a '1/1' Column directly above the content you're targeting by clicking the '+ Columns' button on the lower right side of the Container.

Step 4 - Once you've added the '1/1' column, click the '+ Elements' button to bring up the Elements window. Locate the 'Menu Anchor' element and click it to bring up it's options window.

Step 5 - In the 'Name' field, enter a unique Anchor ID. For example, aboutme.

Step 6 – Once finished, click ‘Save’. Repeat steps 3-5 for all the different content you'd like to target.

Step 7 - The last step, which is outside of the usage of this element, is to add your anchor links that will connect to the anchor id. There are various ways to do this, depending on what you are wanting to link. For more information on the various ways to do that, please see this document.

The Menu Anchor Element in a 1/1 Column

Menu Anchor Element Options

Name - This name will be the id you will have to use in your anchor link.

CSS Class - Add a custom class to the wrapping HTML element for further css customization. Learn more here.

Menu Anchor Options

Menu Anchor Element Parameters

Copy to Clipboard
  • name – The unique name of the ID to use on your one page menu. Learn more here.
  • class - Add a custom class to the wrapping HTML element for further css customization. Learn more here.