We recently introduced a couple of new articles upon our site which made use of internal referenced anchor points to make navigation a little easier. We immediately saw a small problem, in that although the anchors worked and directed the viewer to the relevant part of the article, the positioning was below the required anchor point, so that the header and part of the text was obscured. This was caused by our using a fixed header on each page.
We pondered on the problem for a while and then found this interesting article on the web which described a virtually identical problem and a possible solution.
For those who only want the solution and in case the original article is ever removed, we reproduce our modified version of the solution below.
First, I moved the id’s of each h3 section to a new element: (a span in this case)
<span class="anchor" id="section1">span> <h3>Section1h3>
The new elements were added right above each header section and would serve as the new anchor point. Whilst empty elements on a page are not perhaps the best solution, in this situation is certainly solves the issue.
Once the new elements were in place, a bit of CSS was added to the template custom css:
.anchor{
display: block;
height: 90px; /*same height as header*/
margin-top: -90px; /*same height as header*/
visibility: hidden;
}
It also works well with the responsive template and changing browser window sizing.