Keep anchor-linked sections visible below a fixed header.

When a navigation link points to a section ID, the browser normally places that section at the top of the viewport. On a website with a fixed or sticky header, the first part of the section can be hidden behind the header.

You do not need to add separate spacing to every section. A global scroll offset solves the problem for every anchor link on the page.

Add this global CSS

If your fixed header is 100 pixels tall, use:

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

Add this code to your website’s global CSS area. In Elementor Pro, go to Site Settings → Custom CSS.

How it works

scroll-padding-top reserves space at the top of the scroll container when the browser moves to an anchor. The target section remains visible below the fixed header.

For example, create a section ID without the hash symbol:

<section id="about">
  <h2>About Us</h2>
</section>

Then link to it by adding the hash symbol:

<a href="#about">About</a>

Use different offsets on desktop and mobile

A CSS variable makes the header height easy to maintain. This example uses a 100-pixel desktop header and a 72-pixel mobile header:

:root {
  --header-height: 100px;
}

html {
  scroll-padding-top: var(--header-height);
  scroll-behavior: smooth;
}

@media (max-width: 767px) {
  :root {
    --header-height: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

Alternative: scroll-margin-top

If you prefer the offset to be attached to each anchor target, apply one reusable rule to every element with an ID:

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

For most websites, start with scroll-padding-top on html. You usually do not need both methods.

FAQ

Do I need separate CSS for every section?
No. The global scroll-padding-top rule works for all correctly configured anchor links.

Should the section ID include #?
No. Enter about as the ID and use #about only in the link.

Why is the offset wrong on mobile?
Your mobile header may have a different height. Update the CSS variable inside the mobile media query.

Does this work outside Elementor?
Yes. These are standard CSS properties and work with WordPress themes, page builders, and ordinary HTML websites.