Back to Community
Home / Community / Core → Fixing wordpress

Fixing Anchor Links Hidden by a Sticky Header

11 threads Sep 16, 2025 Core → Fixing wordpress

Content

A common issue for WordPress site builders is anchor links that jump to a section of a page, only to have that section's title hidden behind a fixed ("sticky") header. This guide explains why this happens and provides the most effective CSS solutions to fix it.

Why This Happens

When you click a jump link (e.g., #section-name), the browser instantly repositions the page so the element with that ID is at the very top of the viewport. If you have a header that is always fixed to the top of the screen, it will cover the content you've just jumped to, creating a poor user experience.

The Modern CSS Solution: scroll-margin-top

The cleanest and most modern way to solve this issue is by using the scroll-margin-top CSS property. This property tells the browser to add a margin (or offset) to the top of an element when it is scrolled into view via a jump link.

Here is the basic code you can adapt. You will need to target the CSS selector for your anchor elements (the elements with the IDs you are linking to) and set the scroll-margin-top value to match the height of your sticky header.

[id] {
    scroll-margin-top: 100px;
}

How to implement this:

  1. Identify the height of your sticky header in pixels. You can often find this using your browser's developer tools (right-click the header and select "Inspect").
  2. In your WordPress dashboard, navigate to Appearance > Customize > Additional CSS.
  3. Paste the code above, replacing 100px with the actual height of your header (e.g., 80px). The [id] selector is a broad target that will apply to most elements with an ID.
  4. Publish your changes.

For a more targeted approach, you can apply the property to specific elements:

.your-section-class {
    scroll-margin-top: 100px;
}

Alternative Solution: scroll-padding-top

Another modern property, scroll-padding-top, can be applied to the entire scrolling container (usually the <html> element) instead of the target elements. This can be useful if you have many different types of anchor elements.

html {
    scroll-padding-top: 100px;
}

Important Considerations

  • Specificity is Key: The exact CSS selector you need to use ([id], a class, or the html element) depends entirely on your theme's structure. You may need to experiment to find the most effective selector for your site.
  • Test Thoroughly: After applying any CSS, test your anchor links on both desktop and mobile views, as header heights can change on different devices.
  • Plugin-Specific Issues: If you built your page with a page builder like Elementor and are experiencing other anchor link issues (e.g., links not working at all when shared), the problem may be specific to that plugin's implementation. In such cases, it is often best to seek help from the plugin's dedicated support community on WordPress.org.

By using these CSS techniques, you can ensure a smooth and professional navigation experience for your visitors, with content perfectly positioned below your header.

Related Support Threads Support