menu fixe et décalage avec ancre de lien

[jepstif]

bonjour à tous
je ne sais pas où poser cette question; j'essaye ici

j'ai une barre de menu fixe en haut de page
Lorsque l'on clique sur un lien vers une ancre de la page l'ancre est masquée par le barre de menu

comment le gérer ?

merci pour vos conseils

mon site https://www.docteurperraudin.com

 

[spout]

Il faut mettre un listener sur le hashchange : https://developer.mozilla.org/en-US/docs/Web/API/Window/hashchange_event
Il faut rajouter un morceau de JS qui fait ceci en plus :

window.scrollBy(0, 80);

Pas le temps de donner le code complet là maintenant.

 

[jepstif]

merci pour votre réponse mais je ne connais rien au java; prêt à apprendre ceci dit

 

[spout]

Ah non sorry, je repense à cette propriété CSS qui sera bien plus simple à mettre en oeuvre :

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top

 

[jepstif]

Ah non sorry, je repense à cette propriété CSS qui sera bien plus simple à mettre en oeuvre :

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top

bonsoir Spout
j'ai regardé mais je ne comprends pas comment utiliser cette propriété
peut etre que je n'ai pas bien expliqué mon pb
ma page a un menu fixe en haut
sur ma page des elements avec id ="x"
et des liens vers ces elements #x

le pb : l'élément x n'est pas visible car recouvert par le menu fixe
j'imagine que ce pb est très banal puisqu'il concerne toutes les pages à menu fixe
je suis très surpris de ne pas trouver de solution sur W3s ou autre

merci de m'avoir répondu

cordialement

 

[Dr DLP]

Bonsoir cher confrère,

Ca fait toujours plaisir de voir un médecin s'intéresser à la programmation!

Sinon pour ton problème ce n'est pas l'ancre, ce sont tous les derniers liens qui sont invisibles. La faute à ce passage dans le css:

media screen and (min-width: 1000px)
ul.mainNavUl li:last-child {
    display: none; 
}

qui dit simplement de ne pas afficher le dernier élément de la liste, suffit de le retirer à ce que je vois.

 

[jepsti]

Bonsoir cher confrère,

Ca fait toujours plaisir de voir un médecin s'intéresser à la programmation!

Sinon pour ton problème ce n'est pas l'ancre, ce sont tous les derniers liens qui sont invisibles. La faute à ce passage dans le css:

media screen and (min-width: 1000px)
ul.mainNavUl li:last-child {
    display: none;
}

qui dit simplement de ne pas afficher le dernier élément de la liste, suffit de le retirer à ce que je vois.

Merci cher confrère
Je note l’idée et je vais regarder

Mais mon pb actuellement n’est pas celui-là
: si je mets un lien #id vers une ancre id
L’ID n’est pas visible car masqué par le bandeau du menu fixe
J’espère être plus clair
Cordialement

 

[Dr DLP]

Ok ok, je parlais pour par exemple cette page: https://www.docteurperraudin.com/ligament-croise-anterieur.html pour laquelle tous les derniers liens du menu ne sont pas visibles.

Hmm le problème est il que le menu ne disparait pas après le clic?
Si le but est de continuer en css, on doit pouvoir gruger avec du pseudo élément de type :active.

Quelque chose comme

.mainNavUl > a:active .li .subMenu  {
          transform: scale(0);
        
      }

après

.mainNavUl > li:hover .subMenu  {
          transform: scale(1);
        
      }

dans layout.css.
Pas familier avec les pseudo éléments mais ça se tente
Si un meilleur que moi peut confirmer ça serait sympa!

 

[jepstif]

Merci dlp !

 

[jepstif]

j'ai trouvé une solution en utilisant target

:target {
padding-top: 4em;
margin-top: -4em;
}

et cela semble fonctionné
merci pour votre aide