Par défaut avec le thème Divi, les menus ainsi que les sous-menus sont  tous visibles sur mobile. Voyez sur le GIF ci-dessous:

Les sous-menu du menu mobile de Divi sont ouverts par défaut

Refermer les sous-menus de Divi sur téléphone

Si vous avez un site avec plusieurs items de menu qui ont eux-mêmes plusieurs sous-menus, ça n’est pas très pratique pour le lecteur de trouver facilement celui qui l’intéresse et ça prend beaucoup de place sur l’écran. La navigation n’est donc ni agréable ni pratique.

Heureusement, vous pouvez arranger ça très simplement en utilisant le code suivant.

Notez que si vous avez créé votre menu avec le Theme Builder, remplacez en CSS #main-header .et_mobile_menu et en JS #mobile_menu par #mobile_menu1.

Commencez par ajouter ces quelques lignes dans le fichier style.css de votre thème enfant, ou dans Apparence->Personnaliser->CSS Additionnel :

CSS

Le code précédent permet de cacher les sous-menus et d’afficher un icone (ici l’icone “+”) pour montrer au visiteur qu’il faut cliquer pour dérouler le menu et les afficher.

Ajouter ensuite le code suivant dans Divi -> Options du thème -> Intégration -> Ajouter du code dans la balise <body> :

JS

Cette fonction JQuery va permettre d’afficher ou de cacher les sous-menus lors du clic du visiteur.

Voici le résultat obtenu :

Aperçu des sous-menus du menu mobile de Divi fermés.

Les menus sont bien fermés et les sous menus s’affichent lorsque vous cliquez sur l’un d’eux.

Il est possible d’aller un peu plus loin dans la personnalisation de ce comportement en modifiant les icônes affichés lorsque les sous-menus sont ouverts ou fermés.

Modifier les icônes affichés pour ouvrir ou fermer les sous-menus de Divi sur téléphone

Si vous voulez modifier les icônes “+” et “x”, rendez-vous sur la page des icônes de Divi (le chapitre Complete Set and Unicode Reference Guide) ou ils sont tous listés avec les leurs attributs et choisissez ceux que vous souhaitez utiliser.

Les icones de la police d'icones d'Elegant Themes

Remplacez ensuite les valeurs de content par vos nouvelles valeurs les codes suivant dans le code CSS précédent (aux niveaux des lignes en surbrillance).

Par exemple dans le code utilisé plus haut (lignes 19 et 24), les valeurs des icônes “+” et “x” sont :

CSS

Pensez à bien remplacer les &#xe affichés sur la page des icônes par des \ !

Un dernier exemple en utilisant des icônes différentes (lignes 20 et 25) :

CSS

Et le résultat :

Aperçu des sous-menus du menu mobile de Divi fermés avec des icones personnalisés.

À vous de jouer !