Comment ajouter un élément de sous-menu Divi seulement sur mobile ?

Marlène

9 novembre 2020

Si vous avez un menu avec différents niveaux sur Divi, vous avez peut-être suivi ce tutoriel de Divi Space qui permet de refermer les sous-menus sur mobile. En appliquant cette méthode, le principal souci est que l’item de premier niveau, l’item parent de votre menu, ne sera plus accessible. Pour résoudre ce souci, nous allons voir comment ajouter un élément dans le sous-menu uniquement sur mobile.

Refermer les sous-menus

Pour rappel, voici le code du tutoriel de Divi space, à ajouter dans les options CSS de Divi :

 

.et_pb_menu .et_mobile_menu .menu-item-has-children > a, 
.et_pb_fullwidth_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, 
.et_pb_fullwidth_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,
.et_pb_fullwidth_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,
.et_pb_fullwidth_menu .et_mobile_menu ul.sub-menu,
#main-header .et_mobile_menu ul.sub-menu {
    display: none !important;
    visibility: hidden !important;
    transition: all 1.5s ease-in-out;
}
.et_pb_menu .et_mobile_menu .visible > ul.sub-menu, 
.et_pb_fullwidth_menu .et_mobile_menu .visible > ul.sub-menu, 
#main-header .et_mobile_menu .visible > ul.sub-menu {
    display: block !important;
    visibility: visible !important;
}

Ensuite, le Javascript à intégrer dans les options Divi > Theme Options > Integration > Add code to the body est le suivant : 

 

<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');
      });
    }
  });
}
$(window).load(function() {
  setTimeout(function() {
    ds_setup_collapsible_submenus();
  }, 700);
});
});
</script>

Refermer les sous-menus permet d’avoir une meilleure lisibilité et une meilleure ergonomie. Cependant, il peut y avoir un inconvénient à cette méthode : si votre élément parent mène vers une page sur desktop, le lien ne pourra pas fonctionner sur mobile comme le clic déroule seulement le sous-menu.

Pour résoudre ce souci, vous pouvez adapter votre menu sur mobile en insérant le lien de votre item parent dans le menu déroulant. Pour cela, ajoutez l’élément manquant dans votre menu puis insérez une class CSS.

  • Dans la section menu, ouvrez les options d’écran sur le côté.
  • Cliquez sur les options CSS classes.

 

CSS ajout sous-menu

Ensuite, appliquez la class CSS onlyMobile sur le ou les éléments ajoutés.

ajout class sous-menu

Enfin, ajoutez le CSS suivant dans les options de Divi pour voir cet élément seulement sur mobile.

@media all and (min-width:767px){
.onlyMobile{display:none !important}}

Un exemple en pratique

Sur le site de Caroline Alamy, l’item parent « travel » contient un lien menant vers une page du site. En refermant les sous-menus, la page travel n’est plus accessible. En créant un nouveau lien « See the World Map » sur mobile, cette page est de nouveau visible via le menu.

Sous-menu Caroline Alamy

Nos autres articles

Sep 06 2021

Interview d’Anne-Gaël : motion designer

Aujourd’hui, on rencontre Anne-Gaël, qui va nous expliquer son métier, son parcours et sa vision du motion design.
Juil 06 2021

Comment ajuster la taille du menu Divi sur tablette ?

Dans ce tutoriel, nous verrons comment réduire la police du menu de Divi sur des largeurs d’écran spécifiques afin que l’en-tête ne soit pas sur deux...
Jan 05 2021

Comment installer Google Analytics sur votre site Divi ?

Dans ce tutoriel, nous allons voir comment installer Google Analytics sur votre site construit avec le thème Divi, sans l’aide d’un plugin.