Menu Anchor Element

The Menu Anchor Element marks a spot on a page that links can jump to. It adds nothing visible to the page; it only gives that position a name, so a menu item, a button or a text link can take the visitor straight there.

It is the building block of one page websites, where the main menu leads to sections of a single long page, and it is just as useful on long landing pages, FAQ pages or documentation, where a link at the top should lead to a section further down.

In this article: How To Use · Element Options · Tips · Related Elements

How To Use The Menu Anchor Element

Add the Menu Anchor Element at the top of the section you want to link to, usually as the first element in the first column of that container. Enter a Name, for example services. This name becomes the ID of the anchor.

Now link to it. In a menu (Appearance > Menus) add a custom link with the URL #services. In a Button Element or a One Page Text Link Element use the same #services. To reach the anchor from another page, add the name to that page’s address, for example /about-us/#services.

When a visitor clicks such a link in a Menu Element, a button or a One Page Text Link, the page scrolls smoothly to the anchor and leaves room for a sticky header, so the section does not disappear behind it. The element has no design options because it is invisible.

Element Options

The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.

General

Heading Description
Name This name will be the id you will have to use in your one page menu.
CSS Class Add a class to the wrapping HTML element.

Extras

Heading Description
Conditional Rendering Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results.

Tips

  • Type the Name without the #. The # belongs only in the link that points to the anchor.
  • Use lowercase letters, numbers and hyphens, and no spaces. our-team works reliably, Our Team does not.
  • Every name may be used only once per page. Two anchors with the same name make the links jump to the first one.
  • Links that should not scroll smoothly can be given the CSS class tirenoa-noscroll; they then jump directly.
  • Instead of a separate anchor you can also give a container a CSS ID and link to that; the Menu Anchor Element is simply easier to find in the Builder.