If your website has a fixed header you may have noticed that anchor tag links don’t work perfectly – when a user uses anchor link the location of the anchor becomes hidden behind the fixed header, hiding the first part of the content.
To fix this you can add the following to your CSS style sheet.
This method does not involve any JavaScript or require changes to your theme or content.
:target:before {
content:"";
display:block;
height:90px; /* fixed header height*/
margin:-90px 0 0; /* negative fixed header height */
}
Note: 90px is the height of the fixed header plus margin and padding. You will need to adjust this to the size of your fixed header.
Before:
After:
Reference: http://stackoverflow.com/questions/4086107/html-positionfixed-page-header-and-in-page-anchors
Amazing – this works like a charm – particularly in WordPress, where I simply added the code to the global CSS code in the settings editor.
Thank you very much!
This works on two of my divs and not on 2 of my other divs. For the ones it doesn’t work on, when I inspect it, it’s not creating the extra headspace before it for some reason, but it is on the divs it works on. Can’t tell what the difference is.
Remember that CSS is CASCADING style sheets. Could you have an unordered CASCADE in your CSS file/section where you have defined either ids or classes after the above mentioned solution, that you only adhere to the two DIVs in question?
Thank you so much – Spent an hour finding a solution, and this is by far the simplest, quickest fix!
Omg thank you so much this is the only one that worked!