Look, ma, no javascript! — How to offset an anchor tag link using CSS only

Fixed navbars — with their explicit fixed heights, can throw off the targets for anchor links within the web page. Thwe result is that users wind up landing xx number of pixels beyond the intended anchor point — a frustrating, if minor issue .

Here’s how to fix that.

In the code example below, 90px is the height of the fixed header, including margin and padding. Of course, you will need to adjust this to the size of your fixed header, plus margins/padding.

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