Add space above your anchor tag.

How to add some extra space above your anchor tag.
If you have a fixed header (eg. like the site you are looking at right now), then you will probably have come across the problem of using anchor links. Whenever you link to an anchor the position of the anchor becomes hidden behind the header.

The method I have found to solve this problem is a simple block of CSS without any need to use JavaScript.

:target:before { content:""; display:block; height:90px; /* fixed header height*/ margin:-90px 0 0; /* negative fixed header height */ }

Copy and paste the code above into your stylesheet and adjust the “height:90px” and “margin:-90px” to suit the height of your fixed header. That’s it! Now when you click on a link that takes you to an anchor further down the page, you can control how much space to add above the anchor so that it is no longer hidden behind the header.

Leave a Comment