Champ d’Expertise :

WORDPRESS | SEO | Création | Formation

Site vitrine | Boutique en ligne | E-Réservation

Améliorer le menu mobile Divi

24 05 2022 | Astuces

Avec deux simples copiés collés, je te montre comment améliorer
l’expérience utilisateur sur le menu mobile de ton site web

Par défaut, tous les onglets des menus sont ouverts. Si tu as peu de liens dans ton sous-menu, tout va bien !
Mais dès lors où tu commences à ajouter beaucoup de pages dans tes menus secondaires,
la lecture devient indigeste sur tablette et mobile !

Tu veux absolument faire attention à l’expérience utilisateur de tes visiteurs
en permettant une lisibilité parfaite de ton arborescence.
Et tu as tellement raison, cette astuce très simple va t’aider !

Menu Mobile par défaut de Divi
Améliorer l'apparence du Menu Mobile Divi

5 étapes très simples

La bonne méthode :

  1. Rendez-vous sur tur son espace administrateur de WordPress, onglet Divi / Option Theme
  2. Copier le script (ci-dessous), coller dans l’onglet « L’intégration – Ajouter ligne de code à la < head > de votre blog »
  3. Copier le code CSS (ci-dessous), le coller dans l’onglet « Général – Personnaliser CSS ».
  4. Modifier la couleur de l’icone d’ouverture pour l’adapter à sa charte graphique
  5. Sauvegarder les changements

Les codes à copier-coller

SCRIPT

<script >
jQuery(function($) {
$(document).ready(function() {
$(« body ul.et_mobile_menu li.menu-item-has-children, body ul.et_mobile_menu li.page_item_has_children »).append(‘<a href= »# » class= »mobile-toggle »></a>’);
$(‘ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, ul.et_mobile_menu li.page_item_has_children .mobile-toggle’).click(function(event) {
event.preventDefault();
$(this).parent(‘li’).toggleClass(‘dt-open’);
$(this).parent(‘li’).find(‘ul.children’).first().toggleClass(‘visible’);
$(this).parent(‘li’).find(‘ul.sub-menu’).first().toggleClass(‘visible’);
});
iconFINAL = ‘P’;
$(‘body ul.et_mobile_menu li.menu-item-has-children, body ul.et_mobile_menu li.page_item_has_children’).attr(‘data-icon’, iconFINAL);
$(‘.mobile-toggle’).on(‘mouseover’, function() {
$(this).parent().addClass(‘is-hover’);
}).on(‘mouseout’, function() {
$(this).parent().removeClass(‘is-hover’);
})
});
});
</script>

CSS

/*change hamburger icon to x when mobile menu is open*/

#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before,
.et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
content: ‘\4d’;
}

/*adjust the new toggle element which is added via jQuery*/

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle {
width: 44px;
height: 100%;
padding: 0px !important;
max-height: 44px;
border: none;
position: absolute;
right: 0px;
top: 0px;
z-index: 999;
background-color: transparent;
}

/*some code to keep everyting positioned properly*/

ul.et_mobile_menu>li.menu-item-has-children,
ul.et_mobile_menu>li.page_item_has_children,
ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children {
position: relative;
}

/*remove default background color from menu items that have children*/

.et_mobile_menu .menu-item-has-children>a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a {
background-color: transparent;
}

/*hide the submenu by default*/

ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
display: none !important;
visibility: hidden !important;
}

/*show the submenu when toggled open*/

ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
display: block !important;
visibility: visible !important;
}

/*adjust the toggle icon position and transparency*/

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
text-align: center;
opacity: 1;
}

/*submenu toggle icon when closed*/

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
top: 10px;
position: relative;
font-family: « ETModules »;
content: ‘\33’;
color: #00d263;
background: #f0f3f6;
border-radius: 50%;
padding: 3px;
}

/*submenu toggle icon when open*/

ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after {
content: ‘\32’;
}

/*add point on top of the menu submenu dropdown*/

.et_pb_menu_0.et_pb_menu .et_mobile_menu:after {
position: absolute;
right: 5%;
margin-left: -20px;
top: -14px;
width: 0;
height: 0;
content:  »;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #ffffff;
}

/*adjust the position of the hamburger menu*/

.mobile_menu_bar {
position: relative;
display: block;
bottom: 10px;
line-height: 0;
}

/*force the background color and add a rounded border*/

.et_pb_menu_0.et_pb_menu .et_mobile_menu,
.et_pb_menu_0.et_pb_menu .et_mobile_menu ul {
background-color: #ffffff!important;
border-radius: 10px;
}

Voilà, il ne te reste plus qu’à vérifier que tout fonctionne bien !
Si tu ne l’as pas encore lu, je t’invite à voir mon astuce pour créer une barre de navigation sticky sur ta version mobile : Lire l’article

Ce tuto t’a plu ? Tu souhaites garder le lien avec moi ?
Plusieurs possibilités !

Tu peux t’abonner à ma newsletter pour ne louper aucune info, à ma chaine YouTube ou me suivre sur mon compte Instagram !

Stephanie MALLET : Webdesigner

2 Commentaires

  1. Aline

    Bonjour Steph !
    J’ai voulu appliquer ton astuce sur un site que je suis en train de faire, mais ça ne fonctionne pas…
    J’ai d’abord pensé que c’était parce que j’avais fait mon entête avec le builder et pas gardé celui par défaut, mais même en essayant avec l’entête par défaut, le petit icône d’ouverture n’apparaît pas et au clic, ça m’amène juste sur la page du premier lien, mais je ne vois pas les sous-pages…
    Est-ce que tu saurais y remédier ?
    Merci !

    Réponse
    • steph

      Coucou Aline.

      Tu peux utiliser cette astuce en créant ton header via le Thème Builder de Divi sans problème (c’est ce que j’ai fait d’ailleurs !)
      Alors si ça ne fonctionne pas deux premières possibilités :

    • Vide tes caches
    • Vérifie le code que tu as intégré !
    • Le mieux serait de recommencer en vérifiant d’avoir bien récupéré jusqu’à la moindre « } ». Le code, c’est susceptible !
      Tu me diras si ça fonctionne maintenant !
      (Dans le doute, j’ai refait le test de mon côté et ça fonctionne bien.)

      Belle soirée
      Steph 🌻

      Réponse

Laissez une réponse à Aline Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Bienvenue

Stephanie MALLET : Webdesigner

Steph

WEBDESIGNER & FORMATRICE WORDPRESS

J’accompagne les entrepreneures hédonistes dans la création d’un site web qui a du sens. Une création déléguée ou en autonomie.

Bientôt !

Steph Studio Design évolue et devient : FANCY STUDIO !

Depuis décembre 2023, le Studio a changé de Statut, et se voit faire peau neuve en termes de positionnement stratégique et de communication afin de toujours satisfaire notre clientèle.

Le compte à rebours est lancé !

Migration prévue dans

Jour(s)

:

Heure(s)

:

Minute(s)

:

Seconde(s)

Stéphanie MALLET - Webdesigner à Sisteron - Fancy Studio communication des entreprises

Stéphanie MALLET, Consultante en communication digitale

Déléguer | Être accompagné | Se former à la création de site internet