Ăvitez que les sous-menus restent ouverts et gĂȘnent la navigation sur mobile
Cet article explique comment configurer votre site Divi pour que les sous-menus se referment automatiquement lorsque les utilisateurs naviguent sur la version mobile. Cette astuce simple amĂ©liore l’expĂ©rience utilisateur en Ă©vitant que les sous-menus restent ouverts aprĂšs avoir cliquĂ© dessus. Suivez ce tutoriel Ă©tape par Ă©tape pour implĂ©menter facilement ce rĂ©glage avec seulement quelques lignes de code.
Pourquoi c’est important :
La fermeture automatique des sous-menus sur mobile est importante pour l’expĂ©rience utilisateur car elle empĂȘche que de longs menus verticaux restent affichĂ©s Ă l’Ă©cran. Cela optimise l’interface pour le mobile en ne gardant visible que le menu principal jusqu’Ă ce que l’utilisateur sĂ©lectionne un sous-menu. Le site est ainsi plus facile Ă naviguer sur petite taille d’Ă©cran. Ce rĂ©glage apporte un confort d’utilisation et Ă©vite la frustration. En rĂ©sumĂ©, il s’agit d’un tweak simple mais efficace pour amĂ©liorer l’ergonomie de votre site Divi sur mobile.

Le tuto en vidéo
RĂ©glez vos emplacements de menu – PremiĂšre Ă©tape pour refermer automatiquement les sous-menus Divi sur mobile
Tout d’abord, gĂ©rez l’emplacement du menu en procĂ©dant comme suit :
- Rendez-vous sur votre Dashboard WordPress.
- Cliquez sur « Apparence » puis sur « Menus ».
- Dans l’onglet « GĂ©rer les emplacements », choisissez « Main Navigation » Ă la fois pour l’emplacement « Menu principal » et pour l’emplacement « Menu pied de page ». Copier-coller le premier code CSS
Si vous n’avez pas l’option « Main navigation » remplacez lĂ par « Menu principal » et copier-coller le deuxiĂšme code CSS

Ajout du code CSS
- Rendez-vous sur le Dashboard WordPress de votre site.
- Cliquez sur « Divi » puis sur « Personnaliseur de ThÚme ».
- Dans la section « CSS additionnel », copiez et collez le code CSS suivant :

Code CSS pour l’option « Main navigation »
/**** Cela permet de masquer les éléments du sous-menu sur les téléphones portables ****/
#page-container .mobile_nav li ul.hide {
display: none !important;
}
/**** Cela permet d'ajuster le positionnement et la transparence de l'arrière-plan de l'élément de menu parent sur les téléphones mobiles. ****/
#page-container .mobile_nav .menu-item-has-children {
position: relative;
}
#page-container .mobile_nav .menu-item-has-children > a {
background: transparent;
}
/**** Cette opération permet de styliser l'icône et de la déplacer vers la droite ****/
#page-container .mobile_nav .menu-item-has-children > a + span {
position: absolute;
right: 0;
top: 0;
padding: 10px 20px;
font-size: 20px;
font-weight: 700;
cursor: pointer;
z-index: 3;
}
/**** Ici, vous pouvez remplacer les icônes actuelles ****/
#page-container span.menu-closed:before {
content: "\+";
display: block;
color: #000;
font-size: 16px;
font-family: ETmodules;
}
#page-container span.menu-closed.menu-open:before {
content: "\x";
}
Code CSS pour l’option « Menu principal »
.et_pb_menu .et_mobile_menu .menu-item-has-children > a,
#main-header .et_mobile_menu .menu-item-has-children > a {
background-color: transparent;
position: relative;
}
.et_pb_menu .et_mobile_menu .menu-item-has-children > a:after, #main-header .et_mobile_menu .menu-item-has-children > a:after {
font-family: 'ETmodules';
text-align: center;
speak: none;
font-weight: 600;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
position: absolute;
font-size: 18px;
content: '\4c';
top: 11px;
right: 13px;
}
.et_pb_menu .et_mobile_menu .menu-item-has-children.visible > a:after,
#main-header .et_mobile_menu .menu-item-has-children.visible > a:after {
content: '\4d';
}
.et_pb_menu .et_mobile_menu ul.sub-menu,
#main-header .et_mobile_menu ul.sub-menu,
.et-db #et-boc .et-l .et_pb_menu .et_mobile_menu li ul.sub-menu {
display: none !important;
visibility: hidden !important;
transition: all 1.5s ease-in-out;
}
.et_pb_menu .et_mobile_menu li.visible > ul.sub-menu,
#main-header .et_mobile_menu li.visible > ul.sub-menu,
.et-db #et-boc .et-l #main-header .et_mobile_menu li.visible > ul.sub-menu,
.et-db #et-boc .et-l .et_pb_fullwidth_menu .et_mobile_menu li.visible > ul.sub-menu,
.et-db #et-boc .et-l .et_pb_menu .et_mobile_menu li.visible > ul.sub-menu {
display: block !important;
visibility: visible !important;
}
Changer les icĂŽnes
Vous pouvez remplacer les icĂŽnes (dans l’exemple « + » et « x ») Ă la ligne 25 et 32.
Ajout du code jQuery
- Rendez-vous sur le Dashboard WordPress de votre site.
- Cliquez sur « Divi » puis sur « Options du ThÚme ».
- Dans la section « IntĂ©gration », allez dans l’onglet « Body » et collez le code jQuery suivant :

Code JQuĂ©ry pour l’option « Main navigation »
<script>
(function($) {
function setup_collapsible_submenus() {
// mobile menu
$('.mobile_nav .menu-item-has-children > a').after('<span class="menu-closed"></span>');
$('.mobile_nav .menu-item-has-children > a').each(function() {
$(this).next().next('.sub-menu').toggleClass('hide',1000);
});
$('.mobile_nav .menu-item-has-children > a + span').on('click', function(event) {
event.preventDefault();
$(this).toggleClass('menu-open');
$(this).next('.sub-menu').toggleClass('hide',1000);
});
}
$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
})(jQuery);
</script>
Code JQuĂ©ry pour l’option « Menu principal »
<script>
jQuery(document).ready(function($){
function ds_setup_collapsible_submenus() {
var $menu = $('.et_mobile_menu'),
top_level_link = '.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');
});
}
});
}
setTimeout(function() {
ds_setup_collapsible_submenus();
}, 700);
});
</script>
J’espĂšre que ce tutoriel vous a inspirĂ© Ă explorer tout le potentiel de customisation des menus sur la version mobile de votre site Divi. N’hĂ©sitez pas Ă personnaliser davantage l’apparence et le comportement du menu pour crĂ©er une expĂ©rience optimale adaptĂ©e aux appareils mobiles de vos visiteurs.