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 égale avant chaque ancre ou id sur une page. On modifie le sélecteur en fonction de ses besoins, mais le 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; 
}

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.