Anchor Links with a Fixed Header

I ran into an issue recently where I wanted to use anchors to jump to different sections within a long web page. The problem was every time I clicked the page would jump, but a fixed header would cover part of each section’s content.
After a bit of searching, some trial and error, a simple HTML adjustment and a bit of CSS and the problem was solved.

The Setup and the Problem

I started with a header that was set up like so: (styles inlined for clarification)

<div class="header" style="position: fixed; top: 0;"></div>

Near the top of the page was an unordered list that contains the anchor links:

Now as you can see, I started with adding the IDs to each section. This is when I noticed that clicking on one of the anchor links would actually cause the page to jump to the right section, but some of the content in the section would get covered by the header which is fixed and stays at the top of the page when scrolling occurs.
To overcome the issue a minor HTML adjustment was made and a small amount of CSS was also added to bring it all together.

The Solution That Worked

First, I moved the id’s of each section to a new element: (a span in this case)

The new <span> elements were added right above each section and would serve as the new anchor point. I’m not the biggest fan of empty elements on a page, but it does address the issue.
Once the new <span> elements were in place, a bit of CSS was added:

The height and margin-top numbers are based on the height of the header. Using the Chrome developer tools, this number is easy to figure out.
After these simple adjustments, it was time to jump back in the browser and test it out. Clicking the anchor link jumped down the page and the <span> corrected the space for the header and voilà – The page now jumps correctly!

Well, it sorta works…. what I want to do now is take the huge space out between each of my anchor points. it seems to put a header height space between each section, which is no good for what I am doing.

Greetings! This is my first comment here so I just
wanted to give a quick shout out and tell you I really enjoy reading through your articles.
Can you recommend any other blogs/websites/forums that cover the
same subjects? Thank you so much!

This was truly a meaningful post. Three cheers to you man !!
I was struggling for past 2 hours on this topic and was not able to find any clue on how to do it in simple measure. Your answers was Bull’s eye , straight to the goal.

Thank you kind sir, one correction though, for the sake of people that will copy-paste your code, please correct the commented part of the anchor css class like this:
.anchor {
display: block;
height: 115px; /* same height as header */
margin-top: -115px; /* same height as header */
visibility: hidden;
}

I wanted to thank you for this awesome solution.
I had the same problem working on a chm help file months ago.
That time this it solved my problem, BUT now another
problem emerged out of the HTML bag.
and that’s when you have to refer to an inline position.
I mean something like this for example:

Something and Anything something else . . .

This work around causes “something else” to be rendered to a new line and
that’s another problem, that I believe is because of “display:block”.

Thanks! This was driving me crazy and your solution is simple and effective. I’d be interested to know what a more “semantic” solution would be, without an empty span, but at this point I’m just happy to have it finally working.

Hello
Just wanted a say a huge thank you for this, I was beginning to think I would never work this one out without making a big mess. I can go away for Christmas now with a smile on my face, thank you so much.
Diane

The same bug appears when finding a page with Ctrl+F: the found text would be under the header.
One have to search and then scroll a little bit up to see the highlighted result…
Did you find a solution for this problem?

Very nice! The only problem I have is when using the CSS :target selector. Now it will affect the invisible span instead of the invisible element. I guess it’s more a Javascript problem now. Good job anyway!

Hi there,
I have a menu item that links to an anchor. When I’m on the same page as the anchor and I click the menu item, it takes me to the place I want and nothing is hidden behind the fixed header. When I’m on a different page, however, and I click the same menu item, I’m taken to the place in the text but the top portion is hidden behind the fixed header. This means that the fix above (and any other fix I can think of) will work correctly if I’m coming from another page, but if I’m coming from the same page it will create a space at the top when I navigate to the anchor. Do you have any idea how to fix this?

Sorry, didn’t work straight out of the box, have a feeling its conflicting somewhere, I did not change any of your variables, simply placed the css in my css file, and the span tags above the section i wanted to anchor to, and when i clicked the menu item, the page just scrolled to the top. I can see this as a great solution, however it did not work for me :/

Works perfectly!
After days of nothing a step forward thanks your advice! Thanks a million!!!!
Tried with IE11, Firefox, Chrome, in a pc, and in Firefox, Opera, and Safari in a Mac : It’s work on all of them!

Hi, I have tried this, but did’t work for me. When I click on the hyperlink ‘link’ e.g. ‘Partners’ to jump to the partner section, the “#partner” hashtag is added to the URL but the page does not load, I then click on the refresh button in the browser (chrome) and it loads. need some help. thank you.

THANKS!!!! So simple… Also to make different on mobile you could add something like
@media only screen and (max-width: 700px){
.anchor{
display: block;
height: 80px; /*same height as header*/
margin-top: -80px; /*same height as header*/
visibility: hidden;
}
}
See the result at my site @ http://sharkt.ca/services/local-seo-canada/ I’m currently doing a mobile version of my site so whit this CSS on top i get the exact result I want. THX a million time.

I have a problem that I have the half fixed jejeje the anchor works perfectly as the way you helped us but…. It doesnt math when you put on the menu the #section… it does the same problem at the beggining, if you check my website you can discover what i am talking about, press “uno” in the menu at the top… but dont scroll down and you will see… but if you scroll down a bit and the you press “uno”it will match perfectly… do you know why?

So, I this solution didn’t work for me… I am trying to find a solution where it doesn’t matter how tall the “fixed” element is but that the section always appears underneath it. I say this because this menu is expandable and will change heights based on different window sizes.

Work great ! But one doubt regarding SEO. As anchor links are very usefull to give strength to the keyword used. would it be harmful for SEO to put the anchor on the wrong element (element above the position the anchor should be) ?
Would be even better to use a trick to be able to keep the anchor position…

I used your trick on my website.

NB: in my case i had to adjust the sized of the invisible span to the screen (desktop or smartphone), and also to add an extra margin to the header (only once become sticky – as the relative position on the page move as well…)

Although, I came here looking for a different problem: I’m building a nav-bar of anchor links that should stick on left of my page id desktop view. Problem is that when I use position:fixed (or absolute), links become unclickable. Have you seen this problem too?

Thank you so much for this simple solution! In a wordpress theme using themefusion – I added your .anchor css code to the code section of the page, then created a menu anchor element calling the CSS class: anchor. Then fiddle with the header sizing (mine was closer to 310px) – worked a charm!

Leave a Comment

Most Recent Project

Lovelady Creations

Role: Responsive Design / Wordpress

"Phillip is genius at understanding my product and website needs. He created a website that is user friendly and extremely easy to update. As an artist, I appreciate the aesthetic quality and his abilities to maximize traffic are beyond genius."