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:
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_menuet en JS#mobile_menupar#mobile_menu1.
Commencez par ajouter ces quelques lignes dans le fichier style.css de votre thème enfant, ou dans Apparence->Personnaliser->CSS Additionnel :
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> :
Cette fonction JQuery va permettre d’afficher ou de cacher les sous-menus lors du clic du visiteur.
Voici le résultat obtenu :
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.
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 :
Pensez à bien remplacer les  affichés sur la page des icônes par des \ !
Un dernier exemple en utilisant des icônes différentes (lignes 20 et 25) :
Et le résultat :
À vous de jouer !
Merci pour ce tuto !
Il serait vraiment génial de pouvoir appliquer le même système que sur le menu mobile du thème OceanWP, je m’explique :
Il y a deux zones cliquable sur le menu, à gauche l’accès à la page correspondante, à droite le clic permet d’ouvrir le sous-menu.
exemple : https://gbdesignstudio.co.uk/
Auriez-vous des pistes pour effectuer cela sur DIVI ?
Tks 😉
Bonjour,
Est il possible de mettre la partie de code que l’on place dans “Divi -> Options du thème -> Intégration -> Ajouter du code dans la balise ” dans un thème enfant ? si oui dans quel fichier dois je le mettre.
Merci de votre réponse et bravo pour votre travail.
David
Salut David. Oui tu peux le mettre dans un thème enfant. Si tu ajoutes du JS/JQuery, je te conseille d’essayer de le mettre dans le fichier footer.php pour un chargement optimisé, et si tu vois que ça cause des soucis d’affichage tu peux le mettre dans le fichier header.php, qui est le comportement de base quand tu ajoutes du code dans les options de Divi.
Top, merci !
Avec plaisir 😉
Une petite question, est-il possible de garder les noms des “menus” cliquables ? Je m’explique : les “sous-menus” de l’exemple sont chez moi des pages enfants, et je souhaiterais que la page parent (qui correspond donc dans l’exemple sur Divi Community au “menu”) reste cliquable (le nom de la page renvoyant vers la page et le “+” ouvrant le “sous-menu”), est-ce possible ?.. Merci par avance pour vos idées 🙂
Merci !
Bonjour,
Cela ne fonctionne pas avec le module menu de divi 🙁
Bonjour, effectivement il faut adapter le code CSS pour que ce soit les classes du module qui soient ciblées
Bonjour @Julien,
c’est possible d’avoir un petit coup de pouce à ce sujet ?
je n’arrive pas à cibler les bonne class 🙁
Bonjour Julien,
Je viens d’appliquer ce CSS et cela ne fonctionne pas !
Ton avis ?
Merci
Bonjour,
Tu es sur de n’avoir rien oublié?
Julien, accepte mes excuses car j’avais oublié de valider l’ajout du code dans la balise !
Cela fonctionne parfaitement maintenant.
Et oui vouloir toujours aller vite.
Ha au moins je suis rassuré 😉
Bonjour Julien,
J’ai appliqué à la lettre tes conseils pour « Refermer les sous-menus de Divi sur mobile ».
Cela fonctionne mais avec me semble t’il un problème à savoir : En version mobile le hamburger ouvre bien le menu principal, mais lorsque je sélectionne une des rubriques qui comporte un sous-menu le sous-menu apparaît bien mais la page correspondante à la rubrique ne s’ouvre pas. Alors qu’en version écran large cela fonctionne bien.
Avant de bidouiller, ton avis stp ?
Ma question est identique à celle de Sophie du 9 octobre.
Alain
Site https://j-lorthiois.fr
Bonjour Sophie, je rencontre le même problème que toi a savoir :
“les “sous-menus” de l’exemple sont chez moi des pages enfants, et je souhaiterais que la page parent (qui correspond donc dans l’exemple sur Divi Community au “menu”) reste cliquable (le nom de la page renvoyant vers la page et le “+” ouvrant le “sous-menu”), est-ce possible ?..”
As-tu trouver une solution ? Par avance merci.
Super tuto fait en moins de 5 min, j’ai compilé avec le CSS de https://divicio.us/snippets/make-divi-centered-centered-inline-logo-header-bars-look-like-default-header-bar-mobile/ car j’ai un logo centré. Tout fonctionne cependant petit particularité, la même que Sophie plus haut mais je n’ai pas vu de réponse.
“Une petite question, est-il possible de garder les noms des “menus” cliquables ? Je m’explique : les “sous-menus” de l’exemple sont chez moi des pages enfants, et je souhaiterais que la page parent (qui correspond donc dans l’exemple sur Divi Community au “menu”) reste cliquable (le nom de la page renvoyant vers la page et le “+” ouvrant le “sous-menu”), est-ce possible ?.. Merci par avance pour vos idées ????”
Et pour ma partie boutique, j’ai un décalage du + et du parent par rapport au reste de ma navigation.
Merci d’avance pour ta réponse.
Je suis vraiment désespéré car mon picot burger n’apparait plus sur la version mobile et je ne sais pas comment faire pour qu’il soit de nouveau visible ! Pouvez-vous m’aider SVP ?
Merciiiiiii d’avance
Bonjour, tu es sur qu’il n’a pas la même couleur que ta couleur de fond?
#Julien,
Bonjour et merci.
Concernant la question de Christian, c’est possible ?
Bonjour, actuellement non car tu ne peux pas ouvrir le sous-menu et le lier en même temps.
Bonjour Julien,
J’ai trouvé un post qui permet de le faire, je l’ai implémenté et ça fonctionne !
https://www.mzcreativestudio.com/collapses-show-mobile-menu-divi-theme/
Cordialement,
Merci iDevelopper pour ce post qui répond à une demande complémentaire de fonctionnalité sur le script initial de Julien.
Bonjour,
Le résultat est bizarre : seulement la moitié des items du menu sont modifiés…
https://rcpro.industries/
Bonjour, tu as bien appliqué la classe CSS à tous tes items?
Merci Julien pour ce tuto très utile que j’ai bien appliqué !
Il me manque la cerise sur le gâteau (que je cherche depuis plusieurs heures en vain) :
Quel code jquery ajouter pour que tous les sous menu de même niveau se ferme quand on en ouvre un nouveau ?
Hello, nous n’avons pas encore essayé de faire ça 🙁
OK merci, j’ai fais quelques essais mais je n’arrive pas à cibler uniquement les sous menu de même niveau, ça me ferme tout. Si jamais quelqu’un à une idée, je suis preneur ! 😉
Bonjour,
Merci pour ce code qui m’a bien été utile car il fonctionnait bien, mais je viens de me rendre compte qu’il ne marche plus. Les menus ne se déroulent plus quand on clique…
Alors soit ça vient de la dernière mise à jour Divi (avez-vous le même pb ?) soit la dernière mise a jour du plugin imagify qui propose maintenant de transformer les images en webp, ce que j’ai fait.
Voilà les 2 seuls changement qui auraient pû casser ce fnctionnement.
Le site si vous souhaitez check : https://www.socolas-blog.com
Merci 🙂
As-tu réussi Guillaume à fermer les autres sous menu lorsqu’on en ouvre un autre ?
Bonjour, rien de notre coté donc ça doit être un conflit de code.
Bonsoir, top le tuto ! ça m’a rendu un grand service. Néanmoins j’ai un petit problème :/ Tout fonctionne mais cliquer sur la catégorie principale est impossible. Je m’explique, je peux cliquer sur les sous catégories, sur les catégories sans sous catégories mais impossible de cliquer sur les catégories avec les sous menu…
Comment faire..
Bonjour
Ca ne fonctionnait plus depuis la maj theme builder, résolu avec ce nouveau code :
header .et_mobile_menu .menu-item-has-children > a { background-color: transparent; position: relative; }
header .et_mobile_menu .menu-item-has-children > a:after { font-family: ‘ETmodules’; text-align: center; speak: none; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; position: absolute; }
header .et_mobile_menu .menu-item-has-children > a:after { font-size: 16px; content: ‘\4c’; top: 13px; right: 10px; }
header .et_mobile_menu .menu-item-has-children.visible > a:after { content: ‘\4d’; }
header .et_mobile_menu ul.sub-menu { display: none !important; visibility: hidden !important; transition: all 1.5s ease-in-out;}
header .et_mobile_menu .visible > ul.sub-menu { display: block !important; visibility: visible !important; }
(function($) {
function setup_collapsible_submenus() {
var $menu = $(‘header .et_mobile_menu’),
top_level_link = ‘header .et_mobile_menu .menu-item-has-children > a’;
$menu.find(‘a’).each(function() {
$(this).off(‘click’);
if ( $(this).is(top_level_link) ) {
$(this).attr(‘href’, ‘#’);
}
if ( ! $(this).siblings(‘.sub-menu’).length ) {
$(this).on(‘click’, function(event) {
$(this).parents(‘.mobile_nav’).trigger(‘click’);
});
} else {
$(this).on(‘click’, function(event) {
event.preventDefault();
$(this).parent().toggleClass(‘visible’);
Bonjour Quentin,
J’ai bien utilisé ce code sauf que je n’ai pas les “+” pour dérouler le sous-menu.
J’ai tout essayé, je ne sais plus quoi faire…
Possible d’avoir un petit coup de pouce svp ?
Merci 🙂
Hello,
la réponse est dans un commentaire 😉
Hello, cela veut dire que les icônes de Divi ne sont pas chargés correctement. Tout est à jour sur ton site?
@David Je viens de voir ta question. Non désolé pas ressayé depuis.
Bonjour Julien,
je rêve de pouvoir appliquer la même chose aux éléments de mon menu vertical. C’est à dire permettre de manière plus “séduisante” que l’arborescence horizontale de fenêtres grands parents>parents>enfants. Comment puis-je faire?
Merci beaucoup de ta disponibilité, et merci pour ce contenu fort intéressant.
Excellent tuto merci, tu nous as fait gagner des heures..
Bonjour, tu veux l’appliquer aux sous-sous-menus c’est bien ça?
bonjour,
J’ai appliqué le nouveau code de Quentin vu que j’ai réalisé le header avec le thème bulder mais ça ne fonctionne pas !
Merci pour votre aide
Bonjour Julien,
Je tenais tout simplement a te remercier pour ce “Tuto / Article”
Cela a fonctionné du premier coup !!
Juste une question bête… peux on compter sur ce petit “Patch / Code” sur une longue durée ? avec toutes les mises à jour etc.. est il susceptible a termes de buguer ou autre .. ?
Par ailleurs nous serions éventuellement intéressé par vos compétences, peut on entrer directement en contact avec vous par mail ou téléphone ?
Merci ! 🙂
Bonjour et merci!
Il fonctionne si tu utilises le thème de manière normale, mais je pense qu’il va falloir que je l’adapte pour le Theme Builder.
Pour nous contacter n’hésites pas à nous envoyer un mail à contact@divi-community.fr !
Bonne journée
Bonjour, alors effectivement une petite explication supplémentaire aurait été la bienvenue. Ce code combine le CSS et la partie script et est à insérer dans :
Divi – Options du theme – Integration – Inserer dans la balise body de votre blog
Pensez donc à supprimer les traces des codes précedemment utilisés pour ne pas avoir de conflits.
Je l’ai testée sur 3 site utilisant Divi 4 et le theme builder, et cela fonctionne bel et bien.
header .et_mobile_menu .menu-item-has-children > a { background-color: transparent; position: relative; }
header .et_mobile_menu .menu-item-has-children > a:after { font-family: ‘ETmodules’; text-align: center; speak: none; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; position: absolute; }
header .et_mobile_menu .menu-item-has-children > a:after { font-size: 16px; content: ‘\4c’; top: 13px; right: 10px; }
header .et_mobile_menu .menu-item-has-children.visible > a:after { content: ‘\4d’; }
header .et_mobile_menu ul.sub-menu { display: none !important; visibility: hidden !important; transition: all 1.5s ease-in-out;}
header .et_mobile_menu .visible > ul.sub-menu { display: block !important; visibility: visible !important; }
(function($) {
function setup_collapsible_submenus() {
var $menu = $(‘header .et_mobile_menu’),
top_level_link = ‘header .et_mobile_menu .menu-item-has-children > a’;
$menu.find(‘a’).each(function() {
$(this).off(‘click’);
if ( $(this).is(top_level_link) ) {
$(this).attr(‘href’, ‘#’);
}
if ( ! $(this).siblings(‘.sub-menu’).length ) {
$(this).on(‘click’, function(event) {
$(this).parents(‘.mobile_nav’).trigger(‘click’);
});
} else {
$(this).on(‘click’, function(event) {
event.preventDefault();
$(this).parent().toggleClass(‘visible’);
});
}
});
}
$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
})(jQuery);
Bonjour,
J’ai copié le CSS et le script,
Cependant, il ne se passe rien quand je clique sur l’icône, ça ne déroule pas le sous menu… Merci d’avance 🙂
Bonjour, tu es sur d’avoir bien copié/collé et intégré le code?
Bonjour, merci pour ton retour rapide! Oui J’ai essayé plusieurs fois, le css dans le css, le script dans le body. le css semble bien fonctionner, j’ai bien les catégories du menu principal (cliquable) et les pictogrammes, mais quand je clique dessus, le sous menu ne se déroule pas 😔
Génial, cette manipulation me sauve la vie !
Bonjour,
j’essaie d’appliquer ce super tuto, mais je n’y arrive pas. Mon menu mobile est, dans le Theme Builder, dans une deuxième section, car il est pas mal différent du menu desktop.
J’ai donc une deuxième section, une ligne et un module menu auquel j’ai mis la class ‘menupourmobile’.
J’ai modifié la css comme ça mais ça ne fonctionne pas :
header .menupourmobile .et_mobile_menu .menu-item-has-children > a {
background-color: transparent;
position: relative;
}
header .menupourmobile .et_mobile_menu .menu-item-has-children > a:after {
font-family: ‘ETmodules’;
text-align: center;
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing:antialiased;
position: absolute;
color: white !important;
}
header .menupourmobile .et_mobile_menu .menu-item-has-children > a:after {
font-size: 16px;
content: ‘\4c’;
top: 13px;
right: 10px;
}
header .menupourmobile .et_mobile_menu .menu-item-has-children.visible > a:after {
content: ‘\4d’;
}
header .menupourmobile .et_mobile_menu ul.sub-menu {
display: none !important;
visibility: hidden !important;
transition: all 1.5s ease-in-out;
}
header .menupourmobile .et_mobile_menu .visible > ul.sub-menu {
display: block !important;
visibility: visible !important;
}
Y a-t-il une modification à faire dans le script ?
Merci
Caroline
Bonjour Julien,
Merci beaucoup pour tous ces snippets qui sont très utiles !
bonjour
depuis la maj divi 4.10 ( sur le performance ) la partie javascript ne fonctionne plus, le menu ce déplie complètement.
sa fonctionne toujours sur vos sites ?
Hello, oui. Tu as essayé de désactiver certaines options de performances de Divi ?