Modifier le placement des ancres

Comment facilement modifier le placement de vos ancres html

Pour un site onepage ou dans tout type de configuration, si l’on souhaite placer des ancres sur la page, il se peut qu’il y ait des problèmes de marges ou de padding qui font que la page ne se positionnera pas tout à fait à l’endroit désiré. Typiquement un sous menu en position sticky peut poser problème.

Voici le bout de code à appliquer et à régler en fonction de ses besoins pour remédier à ce problème. Le code suivant place un espace invisible d’une hauteur et d’une marge négative proportionnelle avant chaque ancre ou id sur une page. On modifie le sélecteur en fonction de ses besoins. Ce code fonctionne pour tous les cas de figure.

*[id]:before { 
  display: block; 
  content: " "; 
  margin-top: -75px; // A modifier selon ses besoins
  height: 75px; // 
  visibility: hidden; 
}