Ayushman

Jena

How to Make a Sticky Header Work With Anchor Links

Table of Contents

When an anchor link scrolls to a section but the sticky header covers the heading, measure the header and give the browser room to land. Start by checking the link itself. If the destination has the unique ID pricing, the link on that page should point to #pricing. From another page, add that fragment to the destination URL.

For a document that scrolls in the viewport, try html { scroll-padding-top: 88px }. That example allows for a 72-pixel header and 16 pixels of breathing room. Measure your own header and adjust the value. If your page scrolls inside a panel, put the property on that scroll container instead. If only certain targets need clearance, apply scroll-margin-top to those targets. See MDN’s scroll-padding-top reference.

Test the direct fragment URL in a logged-out window, then activate the same link from the top of the page. Check a narrow screen, a wide screen, and a width where the menu wraps. If the mobile header is taller, adjust the offset at that breakpoint. Use the keyboard to activate the link and check that any focused control remains visible. If the heading still lands under the header, check whether a smooth-scroll script sets its own destination.

If you need help reviewing navigation across a WordPress site, book a website consultation and bring an example link that lands under the header.

About the Author: Ayushman Jena is a website developer and UI/UX designer who helps businesses build high-converting landing pages, fix performance issues, and grow through better design and SEO.

Search

Need a Better Website That Gets Results?

Tell us a little about your project and get a free consultation