Comment changer l’icône hamburger du module de menu Divi en X une fois ouvert

Améliorer l’expérience utilisateur (UX) de votre site web est essentiel pour garantir une navigation intuitive et agréable. Dans le cadre de l’utilisation du thème Divi, l’un des ajustements UX les plus simples et efficaces consiste à modifier l’icône du menu hamburger pour qu’elle se transforme en une icône « X » lorsque le menu est ouvert. Cette modification offre aux utilisateurs une indication visuelle claire de l’état du menu, améliorant ainsi l’interaction avec votre site.

Pourquoi changer l’icône du menu hamburger en « X » ?

Par défaut, le thème Divi utilise une icône de menu hamburger (trois lignes horizontales) pour représenter le menu de navigation sur les appareils mobiles et, dans certains cas, sur les versions de bureau. Cependant, lorsque le menu est ouvert, l’icône reste inchangée, ce qui peut prêter à confusion pour certains utilisateurs. En remplaçant l’icône hamburger par une icône « X » lors de l’ouverture du menu, vous fournissez une indication visuelle explicite que le menu peut être fermé en cliquant sur cette icône. Cette pratique est courante dans la conception web moderne et contribue à une meilleure expérience utilisateur.

Comment implémenter cette modification dans Divi ?

La personnalisation de l’icône du menu dans Divi peut être réalisée en ajoutant un simple extrait de code CSS. Voici les étapes à suivre :

1. Accéder aux options de personnalisation CSS de Divi :
   • Utiliser un thème enfant : Si vous utilisez un thème enfant, ajoutez le code CSS dans le fichier style.cssde votre thème enfant.
   • Options du thème Divi : Si vous n’utilisez pas de thème enfant, vous pouvez ajouter le code CSS en accédant à votre tableau de bord WordPress, puis en naviguant vers Divi > Options du thème > CSS personnalisé.
2. Ajouter le code CSS suivant :

Ce code cible l’élément .mobile_menu_bar lorsque le menu mobile (.mobile_nav) est ouvert (.opened) et remplace le contenu de l’icône par le caractère correspondant à l’icône « X » dans la police d’icônes intégrée de Divi, appelée ETmodules.

/* Changer l'icône du menu hamburger en X lorsque le menu est ouvert */ 
.mobile_nav.opened .mobile_menu_bar:before { content: '\4d'; } 

Explication du code :

• .mobile_nav.opened : Sélecteur qui cible le menu mobile lorsqu’il est dans l’état « ouvert ».
• .mobile_menu_bar:before : Sélecteur qui cible l’élément pseudo :before de la barre de menu mobile, où l’icône est définie.
• content: '\4d'; : Propriété qui remplace le contenu actuel par le caractère Unicode \4d, correspondant à l’icône « X » dans la police ETmodules.

Ajout d’une animation de rotation :

Pour rendre la transition entre l’icône hamburger et l’icône « X » plus fluide et attrayante, vous pouvez ajouter une animation de rotation. Bien que les icônes soient des glyphes solides et ne puissent pas être morphées directement, une rotation offre un effet visuel agréable.

Ajoutez le code CSS suivant :

/* Ajouter une transition de rotation à l'icône du menu */
.mobile_menu_bar:before {
    transition: all 0.4s ease;
    transform: rotate(0deg);
    display: block;
}

/* Faire pivoter l'icône du menu de 90 degrés lorsque le menu est ouvert */
.mobile_nav.opened .mobile_menu_bar:before {
    transition: all 0.4s ease;
    transform: rotate(90deg);
    display: block;
}

Explication du code :

• transition: all 0.4s ease; : Applique une transition douce de 0,4 seconde à toutes les propriétés modifiées, avec une courbe d’accélération/décélération.
• transform: rotate(0deg); : Définit l’icône à sa position normale (0 degré) lorsque le menu est fermé.
• transform: rotate(90deg); : Fait pivoter l’icône de 90 degrés lorsque le menu est ouvert, créant ainsi l’effet de transition vers l’icône « X ».

Considérations supplémentaires :

• Compatibilité : Assurez-vous que votre site est à jour et que les personnalisations CSS n’entrent pas en conflit avec d’autres styles présents sur votre site.
• Tests : Après avoir ajouté le code, testez le menu sur différents appareils et navigateurs pour garantir une expérience utilisateur cohérente.
• Sauvegarde : Avant d’apporter des modifications au CSS, il est recommandé de sauvegarder votre site ou d’utiliser un thème enfant pour éviter toute perte de données ou de configuration.

En suivant ces étapes, vous améliorerez l’expérience utilisateur de votre site en fournissant des indications visuelles claires sur l’état du menu de navigation. Cette petite modification peut avoir un impact significatif sur la convivialité de votre site, rendant la navigation plus intuitive pour vos visiteurs.

En conclusion, personnaliser l’icône du menu hamburger pour qu’elle se transforme en « X » lors de l’ouverture du menu est une amélioration simple mais efficace de l’interface utilisateur de votre site Divi. Cette modification offre une expérience de navigation plus intuitive et professionnelle à vos visiteurs, renforçant ainsi l’engagement et la satisfaction des utilisateurs.