Besoin de fixer une navigation qui s'accroche/se décroche en scrollant

[Dellou]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis toujours
Lien du forum : https://wheel-and-deal.forumactif.com/

Description du problème

Bonjour forumactif !
Voilà je viens à vous car je rencontre un petit soucis avec la navigation !
J'aimerais que la navigation soit toujours accrochée en haut du forum, malheureusement, en débutant ce nouveau forum, je me retrouve avec une navigation qui s'accroche en haut seulement une fois que je scroll et je n'en comprend pas la provenance. En faisant "inspecter" je remarque que

Code:

headerbar-top

se transforme en

Code:

 responsive-headerbar is-sticky

Ici : https://i.imgur.com/0cvkyiK.png
Puis : https://i.imgur.com/i8LCAcV.png

J'ai essayé de modifier tout cela dans les templates... en vain ! Je n'ai jamais rencontré ce problème auparavant et je n'en comprend pas la source... En gros, j'aimerai juste que la barre soit continuellement fixée en haut sans ce changement embêtant... mais en suivant le scroll!! Pas fixé sans bouger avec le scroll, juste sans cette "accroche/décroche" flagrant

Quelqu'un saurait m'aidé ? Merci de votre attention !

[MlleAlys]

Bonjour,
C'est un javascript qui ajoute ou retire la class "is-sticky" en fonction du défilement de la page, et c'est pourquoi l'ajouter dans le template ne suffit pas.
On peut par contre appliquer le css qui correspond à "is-sticky" aux éléments même lorsqu'ils ne sont pas associés à "is-sticky", de façon à avoir une apparence identique dans les deux cas.
Dans votre css, ajoutez les codes suivants :

Code:

#headerbar-top {
  background-color: #000;
  box-shadow: 0 0 3px rgba(0,0,0,0.9);
  height: auto;
  left: 0;
  padding: 6px 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10000!important;
}
#logo {
  display: none;
  height: 0;
  margin: 0;
  opacity: 0;
  transform: translateY(-200px);
  width: 0;
}
.navbar li {
  margin: 0;
}

[Dellou]

Oooooh merci infiniment !!! L'explication est claire, merci beaucoup et en plus de ça le code fonctionne parfaitement!!
Merci merciii !

Passez une belle journée!