Modifier le point de rupture du menu mobile de Divi - Divi Community

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:

menu 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 :

/*Modifier le point de rupture du menu mobile*/
/*En fait ici on cache le menu standard et on affiche le menu mobile*/
@media only screen and ( max-width: 1590px ) {
#top-menu-nav, #top-menu {display: none;}
#et_top_search {display: none;}
#et_mobile_nav_menu {display: block;}
}

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 😉