Comment résoudre le problème du header qui saute - Divi Community

Il vous est peut-être arrivé de constater sur votre site Divi, que la barre de navigation du header ne se positionnait pas immédiatement à la bonne place au chargement de la page, comme l’illustre la capture d’écran animée ci-dessous.
Nous allons donc voir comment corriger ce petit bug.

Pourquoi ça se produit ?

Ce “header sauteur” est dû au fait que les réglages que nous appliquons via le personnaliseur de thème (hauteur du logo, hauteur de la barre de menu…) injectent des CSS grâce à Javascript.
Et les navigateurs rendant le CSS avant le Javascript, on se retrouve donc avec un chargement des styles en 2 temps.
Heureusement pour nous, c’est très facile à corriger… en CSS !

Corrigeons le problème

Appelez l’inspecteur !

Pour commencer, il nous faut trouver les valeurs qui sont injectées par le personnaliseur de thème.
Faites un clic droit sur le header et choisissez “Inspecter” ou “Examiner l’élément” (suivant le navigateur que vous utilisez) pour afficher la fenêtre de l’inspecteur web.
Dans l’onglet “Elements”, repérez la DIV avec l’identifiant page-container et le header (avec l’identifiant main-header).
Pour le premier, notez la valeur de padding-top et pour le second la valeur de top.

Un peu de CSS

Maintenant, allez dans les Options du thème -> Personnaliser CSS OU ouvrez le fichier style.css si vous avez un thème enfant et collez le code ci-dessous :

@media screen and (min-width: 981px) {

#page-container {
padding-top:119px !important;
}

#main-header {
top: 45px !important;
}

.admin-bar #main-header {
top: 77px !important;
}

}

Examinons le code :

  • Ligne 1 : nous limitons l’application de ces styles au header dans sa version desktop, car sur mobile le problème ne se posera pas.
    Notez que si vous avez modifié le point de rupture mobile, pensez à changer la valeur de 981px par votre valeur personnalisée.
  • Ligne 4 : saisissez la valeur de padding-top que vous avez notée tout à l’heure.
  • Ligne 8 : cette valeur est soit égale à 0px si vous n’avez pas de barre de menu secondaire, soit de la hauteur de celle-ci comme c’est le cas dans mon exemple.
  • Ligne 11 : permet de gérer le cas où l’utilisateur est connecté, on tient donc compte de la hauteur de la barre d’admin (merci Yan de m’avoir fait remarquer ça !).
  • Ligne 12 : saisissez la valeur de top que vous avez notée tout à l’heure. Si vous l’avez relevée en étant connecté, cette valeur devrait correspondre à la hauteur de la barre d’admin (généralement 32px) + la hauteur de votre barre de menu secondaire (si elle est activée bien sûr).

Et c’est tout…

Ce petit souci ne se produit pas systématiquement (pour ma part je ne l’ai que peu rencontré), mais il est toujours utile de savoir comment le corriger rapidement.
Pensez juste que si vous modifiez, dans le personnaliseur de thème, vos réglages concernant la hauteur du logo, la hauteur de la barre de menu, etc., il vous faudra réajuster les valeurs.
C’est donc une manip à faire de préférence lorsque le design de votre site est terminé.

Pour conclure, sachez tout de même, si vous ne voulez pas mettre les mains dans le code, qu’il existe un mini plugin gratuit (conçut par le génial Sean Barton) qui permet de corriger ce bug (9 fois sur 10 d’après l’auteur). En bonus, il ajoute également la possibilité de ne pas appliquer le correctif sur les pages de son choix.