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 :
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.
Super merci beaucoup ! J’avais ce saut qui m’exaspérait et je en savais pas comment le corriger ! C’est fait ! 🙂
Avec plaisir ! 🙂
Nous sommes sur la version 3.6 de DIVI et nous avons ce problème sur l’un de nos site en développement, sur desktop, mais aussi sur tablette et mobile.
Nous avons suivi à la lettre le tuto mais cela ne résout pas le problème.
Notre code source est légèrement différent de votre screenshot (par exemple, la balise page-container ne contient que : sans aucun style en brut dans le HTML).
Et pour le main-header, nous avons aussi appliqué votre tuto, mais ça ne change rien. Quand on recharge la page, on se rend compte que ce sont les valeurs data-height-onload qui change de ça :
à ça :
je ne sais pas d’où vient la valeur 729, ni 44, mais le saut se fait quand data-height-onload=”30″ passe à 44.
On n’arrive pas à comprendre comment résoudre ça. D’autant plus que sur un autre site fait sous DIVI, nous n’avons pas rencontré ce problème.
Est-ce que quelqu’un peut nous aider ?
Si la modif à la main ne fonctionne pas, utilisez le plugin gratuit de Sean Barton que je cite à la fin de l’article. 😉
Super, le plugin de Sean Barton a effectivement réglé le dysfonctionnement, merci beaucoup. On s’abonne à votre site plein de bonnes ressources.
Ah, par contre, ça bugge toujours sur le smartphone et tablette. malgré le plugin de Sean.
Merci pour l’astuce !
Par contre je n’ai pas trouvé le mini-plugin chez Elegant Market Place, il vaut mieux aller le chercher directement chez Sean Barton :
https://www.sean-barton.co.uk/2017/11/the-ultimate-jumping-header-fix-free-plugin/
Bien vu ??, il a dû être retiré d’EMP… je modifie le lien dans l’article.
Bonjour,
merci pour cet article.
Pour info ce plugin n’est plus disponible ni sur le site de Sean Barton, ni dans la bibliothèque de plugins wordpress …
Je suis donc dans le même cas que Benoît avant qu’il fixe le problème avec ce plugin, sans solution.
J’ai mis à jour le lien pour télécharger le plugin. 😉
Merci beaucoup Pierre 😉
Encore un auto simple et efficace !
Merci
Bonjour,
j’ai ce problème de header qui saute mais à l’inverse uniquement sur mon iPhone (5SE) et pas sur le Desktop.
J’ai donc adapté pour pouvoir éviter le saut sur mobile.
J’ai fais mes test dans Google Chrome avec les outils développeur et le simulateur de format pour les différents devices.
Je suis parvenu a un rendu correct dans Chrome mais lorsque je fais le test sur mon iPhone, j’ai un décalage avec mes réglages.
J’ai donc fait une discrimination dans le CSS pour choisir en fonction de l’os.
Ce qui donne :
@media only screen and (max-width: 980px) { @supports (-webkit-overflow-scrolling: touch) { /* CSS specific to iOS devices */ #page-container { padding-top: 110px!important; } #main-header { top: 30px!important; } } @supports not (-webkit-overflow-scrolling: touch) { /* CSS for other than iOS devices */ #page-container { padding-top: 110px!important; } #main-header { top: 77px!important; } }Je n’ai pas eu l’occasion de tester sur d’autres mobiles.
Je ne sais donc pas si ça donne la bonne mise en forme dans tous les cas.
Je ne sais pas pourquoi iOS interprète différemment de chrome.
Peut-être que cela pourra servir pour affiner les choses.
Merci pour le tuto.