Help, de ankerplaats verdwijnt onder de header!

Als je website een sticky header heeft (dat is een header, meestal met het hoofdmenu daarin, die altijd in beeld blijft bovenaan het venster van de browser) dan kan het zijn dat, wanneer je links binnen de pagina maakt met anchors, de ankerplaats helemaal of gedeeltelijk onder die header verdwijnt. Het staat namelijk standaard zo ingesteld dat de plaats waar het anker naar toe wijst helemaal bovenin het browservenster wordt getoond. De sticky header zit daar dan vóór.

Om dit op te lossen hoef je slechts enkele regels aan de css van je thema toevoegen.

[code]
/* offset anchor tag link */
:target:before {
content:””;
display:block;
height:160px; /* fixed header height*/
margin:-160px 0 0; /* negative fixed header height */
}
[/code]

Bron: http://www.itsupportguides.com/tech-tips-tricks/how-to-offset-anchor-tag-link-using-css/

Let op: pas ook de responsive styles aan. De hoogte van de header is daar vaak anders.

 

Wil je reageren?

Graag!
Je kunt hier een berichtje achterlaten. Het is noodzakelijk daarvoor je naam en emailadres in te vullen. Het emailadres zal nooit openbaar worden gemaakt.
Na goedkeuring door WP-bieb zal je bericht op de website verschijnen.

*