Displaced anchor links when used with a fixed page header

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.

Making a component truly Multilingual (1)
IP Mapping, clustering, refresh – performanc...
 

By accepting you will be accessing a service provided by a third-party external to https://macrotoneconsulting.co.uk/

Go To Top

The Macrotone Consulting Web site would like to use cookies to store information on your computer, to improve our website. Cookies used for the essential operation of the site have already been set. To find out more about the cookies we use and how to delete them, see our Privacy Policy.

I accept cookies from this site.