Easily Apply an Offset to Menu Anchors of Your WordPress Website

Recommendation

Learn why I switched to WPCodeBox for managing code snippets for myself and for my clients.

Instructions

Snippet Type: CSS

  1. Copy the snippet.
  2. Add the snippet using WPCodeBox.
  3. Follow any customization notes provided.
  4. Save the snippet.
  5. Enable the snippet.
  6. Test.

Snippet

Customization Notes

If you’ve ever linked to a particular element on a post, page, etc., only to find the content gets hidden behind your header, then this code snippet is for you.

This snippet assumes your header is 100 px and applies an offset that is at least the same height as your header.

So, while your header will be whatever height it is, you can adjust the offset to fit your needs.

The rest of the snippet is basically saying to hide the anchor (visibility: hidden) and make it so it’s a dead link (pointer-events: none).

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