Sur mon site, j'ai le thème Bootstrap 3 avec une barre de navigation fixe.

Lorsque je clique sur un lien d'ancrage, par exemple:

https://www.s1biose.com/fr/legal/document/policies#cgu-1-3

Une partie du texte est masquée par la barre de navigation.

Dans mon exemple, le titre 1.3 devrait être positionné dans la barre de navigation.

Comment créer un décalage sur un lien d'ancrage?

-1
Mathieu 6 nov. 2019 à 16:00

1 réponse

Ajoutez le pseudo-élément suivant au style :target { padding-top: 10%;} remplacez la valeur de 10% par la hauteur de la barre de navigation.

:target {
  border: 2px solid #D4D4D4;
  background-color: #e5eecc;
  padding-top:10%;
}
<!DOCTYPE html>
<html>
<head>
<title>Sample code</title>
</head>
<body>

<h1>This is a heading</h1>

<p><a href="#news1">Jump to New content 1</a></p>
<p><a href="#news2">Jump to New content 2</a></p>

<p>Click on the links above and the :target selector highlight the current active HTML anchor.</p>

<p id="news1"><b>New content 1...</b></p>
<p id="news2"><b>New content 2...</b></p>

<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :target selector.</p>

</body>
</html>
0
prajun karn 6 nov. 2019 à 13:23