Le point de rupture du menu (ou breakpoint en anglais) du menu de Divi correspond au moment où le menu standard est remplacé par le menu mobile (le hamburger).
Dans la majorité des cas, il est configuré correctement et vous n’avez pas besoin d’y toucher. Mais pour vos besoins ou ceux de vos clients, vous devrez aussi parfois mettre pas mal d’items dans le menu. Et là, ça peut vite devenir le drame.
Un exemple rapide sur le playground de Divi Community:
Plutôt moche non ?
Quand je vois ça sur un site, je ressemble à ça :
Comment procéder alors pour éviter d’en arriver là ?
Trouver le point de rupture parfait pour votre menu
Nous allons donc voir comment trouver la valeur exacte en pixel pour configurer votre point de rupture.
Cette valeur correspondra à la largeur de pixel de l’écran avant que votre menu ne passe sur 2 lignes ou ne se superpose au logo de votre site.
Pour cela nous allons utiliser l’inspecteur de code de Google Chrome ( ou Firefox si vous préférez, mais j’utiliserai Chrome ici)
Faites un clic droit sur votre site et sélectionnez “Inspecter”.
Faites maintenant varier la taille de votre fenêtre. Vous voyez la valeur en pixel qui s’affiche en haut à droite ? Regardez sur la vidéo suivante :
Et bien nous allons nous servir de ça pour trouver notre point de rupture le plus précisement possible.
Par exemple sur le Playground de Divi Community, il se situe à environ 1590 px. Remplacez bien évidemment cette valeur par la vôtre.
Maintenant que nous avons la valeur exacte de notre point de rupture nous allons utiliser le code suivant :
Et c’est tout !
Voyez le résultat maintenant :
Vous n’avez maintenant plus aucune excuse pour ne pas optimiser au maximum vos menus avec Divi 😉
Super encore un fois le tuto, mais j’aurais une question la rupture vers le menu hamburger est nickel mais par contre j’ai des animation sur les menu de divi et quand le point de rupture est atteint les animation sont toujours là c’est pas très jolie, saurais tu comment enlever les animation des menu comme lorsque que l’on est sur un mobile.
Merci et encore bravo pour votre site.
David
Salut David, de quelle genre d’animation parles-tu?
Dans apparence->personnaliser->entete et navigation->barre de menu principale et tout en bas il y a animation du menu déroulant.
Aah. Et tes animations ne marchent plus à quel moment?
Ben en fait le problème c’est quelle fonctionne même si la rupture spécifique est atteinte alors que si je laisse faire divi avec ses ruptures a lui cela fonctionne (quand le menu hamburger est afficher plus d’animation ce qui est bien)
Ok alors dans ce cas il faut aussi modifier le point de rupture de l’animation. Je vais regarder où on peut trouver ça
Super Merci
Tu as une URL à me laisser?
http://www.humaindigital.com la rupture est a 1124px
Bonjour,
J’ai utilisé ce bout de code à mon point de rupture qui est à 1150 px. Mon menu est central avec le logo au centre. J’ai également ajouté un bout de code pour que mon menu mobile correspond au menu classique (logo à gauche et hamburger à droite).
Mais j’ai un problème entre mon point de rupture (1150px) et 980px : le menu disparait totalement pour laisser uniquement l’icône de recherche.
Super article,
Juste une question, est-il possible de modifier les valeurs par défaut des points de rupture? pour avoir par exemple la configuration “tablette” qui arrive à 500px (et non pas 768 px) et du coup le format mobile de 0px à 499px?
Merci
Bonjour Clément, oui c’est tout à fait possible. Il suffit d’adapter mon code suivant la taille de l’écran. Regarde dans l’inspecteur de code de Chrome pour avoir le CSS à modifier facilement.
Bonjour Julien, je dis peut être une bêtise mais ce code ne modifie que le css du menu non ? En l’occurrence je parle de modifier toute la configuration de la page, pour que la configuration “tablette” s’affiche plus tôt car j’ai des blocs que je rends non visible sur mobile, mais du coup l’affiche ne commence qu’à 768 pixels ce qui est un peut tard…
Bonjour, je rencontre un problème sur l’adaptation du menu sur mobile et tablette.
Il semblerait que mon menu soit trop grand et produise donc des énormes marges grises sur mobile et tablette. Le menu hamburger se retrouve completement à droite de l’écran dans un fond noir qui n’a rien a voir avec ma page d’accueil (l’effet se produit sur toutes les pages). J’ai essayé tout ce qui était possible de faire sur l’interface de divi mais rien ne fonctionne. Comment faire pour que le menu s’adapte correctement sur mobile et tablette ? Voila l’url de mon site si cela peut aider : https://kykeon-theory.com/ , le problème n’est visible que sur téléphone et tablette quand on dézoom et qu’on scroll sur la droite. Merci d’avance !
Salut, chez moi tout s’affiche très bien partout ?
Merci encore pour un super tuto rapide et efficace.
Hello world ! Petite question, est ce que quelqu’un a trouvé la solution que Lilian a évoqué plus haut? Je cherche partout et ne trouve pas la solution. Entre le point de rupture et le menu mobile tout disparaît également de mon côté…Merci d’avance pour vos réponses.
Bonjour, tu veux dire que tu n’as plus de menu?
Bonjour,
Je n’ arrive pas à modifier le point de rupture, j’ai bien inscrit le code css avec la bonne largeur en pixel mais ça ne marche pas …
J’ ai donné un id a mon menu ça vient surement de ça…
En effet, il est possible que tu ne cibles pas le bon élément…