Main Content

How to fix anchor links when you have a fixed header.

Anchor links are a convenient way to send people directly to the content they’re looking for. However, if you have a fixed header, things quickly become a problem as the content is now hidden behind the sticky header.

If you’re writing your own code, you can easily use CSS to get around this. Check out this StackOverflow thread.

The issue comes when you’re using a pre-built system that you have less control over the code. Like Beaver Builder for example. In this case, editing the code isn’t really isn’t the right answer.

You can, however, make everything work out right with a little jQuery.

What this code is doing is first detecting if there is a hash in the URL. If so, does that hash exist on the page? If yes, then find the position, remove 100 pixels, and then scroll to that spot on that page. Removing 100 pixels means that the spot it scrolls to will be behind the fixed header and the content they really want to read will be front and center.

This code has been sent to Beaver Builder in hopes that they integrate it into their codebase, but I’m sure there are other systems that could benefit from this as well.

Leave a Reply