Sticky Header Covers Anchor Text

Question

I have a sticky header that floats over the rest of the page. When I link to page anchors, of course is scrolls so that the anchor is at the top of the page. However, when this happens the header covers up the text beneath.

Is there someway to fix this? I can't just move the anchor down because there are many of them on the page and each one has a different amount of text following. My first though was to somehow scroll to some height above the anchor.

Thanks, David

Answer 1

The :target pseudo element could be what you are looking for. With :target you can address the element that is pointed out with the #-mark. Read more about it here

Answer 2

I ran into the same issue, ended up making a rule like this:

A.named:target {
    display: inline-block;
    height: 120px;
    margin-top: -120px;
}

I then applied the class "named" to any anchor tag that I want the browser to scroll to. This adds 120px of space between the top of the browser and the bottom of the element that contains the anchor - about 80px for the header, and another 40px to compensate for the height of the H2 headings I was linking to... And, with the negative margin cancelling out the positive one, it doesn't affect the look of my page.

Hope this helps!