Anchor links scroll to incorrect position

Question

I'm struggling to make my anchor links work properly. Website is http://www.imprero.com and at the very top you see a link "Zobacz atrakcje" which should lead to a section below called "Produkty". Here already the scroll positions the window too much upward, since all two icon rows should be visible (according to div id="produkty"). Now this is the product list linked internally to sections of the page below. Only the first two position correctly, whereas all further are more or less wrong. In each product section there is a link "Lista atrakcji" which directs back to the product list. When I click the same icon link it many times directs me to a slightly different position. What the heck??? Any ideas? Would appreciate...

Answer 1

The problem is that your fixed header is out of the document flow so it's height/position are not factored in to the scroll position of the browser. If you were to hide the header after clicking the anchor tag you would see that it does place you in the right position. This can be compensated for with a little CSS:

// Adjustment for anchor tag positioning with fixed header
:target:before
{
   content: "";
   display: block;
   height: 57px; //Height of header
   margin-top: -57px;
}