Menu Anchor Widget

The Menu Anchor widget allows you to create a page with 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;
}

Share it on social networks

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

Did this answer your question?

255 people find it useful

Yes

No

Get Started With Elementor Today

Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before

Cyber Monday Sale: Up to 25% OFF

Sale Ends In

:
:
:

It’s Time To Spoil Yourself!

Up to 25% Off

:
:
: