Menu Anchor Widget

The Menu Anchor widget allows you to create a page with an internal smooth scrolling navigation.

Content

Anchor

  1. Drag the Menu Anchor widget to the top of the area you want the link to scroll to

    Note: The widget takes up no actual space and is invisible to the visitor.

  2. Give the anchor a name. (ie: contact-us)
  3. Edit the menu or widget element that will be linking to your anchor
  4. Type ‘#’ + the anchor name (ie: #contact-us) in the URL link field of the menu item or widget element. Please note The ID link ONLY accepts these chars: `A-Z, a-z, 0-9, _ , -`

Advanced

Set the Advanced options that are applicable to this widget

Menu Anchors are only supported when used on the same page. Link anchors on different pages may not work properly and are not supported.

Adjust Sticky Header Offset for Anchor Links

If you are using a Sticky Header and anchor links, the sticky header may overlap the top portion of the anchor linked content. If that happens, add the following code to your CSS (Appearance > Editor > Additional CSS). Be sure to change the "80px" below to match the height of your fixed header.

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

Related Articles