Menu anchor widget

The menu anchor widget allows you to create a page with smooth scrolling internal navigation.

Content

Anchor

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

   Note: The widget does not take up real space and is invisible to the visitor.

2. Give the anchor a name. (i.e. contact us)
3. Edit the menu or widget item to link to your anchor
4. Type '#' + the anchor name (i.e .: # contact-us) in the URL link field of the menu item or widget item. keep in mind The link ID ONLY accepts these characters: `AZ, az, 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 fixed header offset for anchor links

If you are using a fixed header and anchor links, the fixed header may overlap the top of the anchor linked content. If that happens, add the following code to your CSS (Appearance> Editor> Additional CSS). Make 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; }