Le picto du menu Divi « burger » est un symbole représenté par trois lignes horizontales, généralement sur téléphone mobile, pour indiquer la présence d’un menu déroulant. Avec Divi, lorsqu’il est cliqué et que le menu s’ouvre, cet icône reste le même. Pour un utilisateur qui n’est pas habitué, il peut alors chercher comment fermer le menu. Pour améliorer l’expérience utilisateur, remplacer l’icône du menu initial par une croix (ou un autre symbole) permet d’identifier directement où fermer ce menu.
Nous vous expliquons dans cet article comment faire pour effectuer ce changement.
La solution pour changer le picto Divi burger par un autre symbole
Les icônes du menu Divi ne sont pas des images, mais des caractères de la police « Elegant Icon Font ». Vous pouvez donc choisir n’importe quel caractère de la liste d’icônes Elegant Font. Notez le chiffre et la lettre en fin de code pour l’insérer dans le code CSS ci-dessous. Nous allons choisir la croix pour cet exemple. Le code sur la liste Elegant Font est « M », on ne retiendra donc que 4d. Vous pouvez également faire varier sa couleur (sinon supprimer la ligne « color: red; » pour qu’il conserve la même couleur que l’icône initial) :
/**changer le picto du menu burger ouvert**/
.mobile_nav.opened .mobile_menu_bar:before {
content: '\4d';
color: red;
}Si vous ne savez pas comment ajouter du code CSS à votre site, consultez notre guide « 5 options pour ajouter du CSS à votre site Divi. Comment choisir la bonne pour votre projet«
Pour aller un peu plus loin, vous pouvez ajouter une petite animation de transition entre les deux pictos. Pour cela, ajouter le code suivant
En plus de personnaliser le picto, vous pouvez également ajouter une animation au clic. Voici le code CSS à ajouter. Ce code permet de faire une rotation de 90 degrés à l’icône modifié. Vous pouvez changer ce nombre dans le code ci-dessous pour obtenir une animation et une position de fin différente :
/**ajouter une animation de transition entre les pictos du menu burger**/
.mobile_menu_bar:before {
transition: all .4s ease;
transform: rotate(0deg);
display: block;
}
.mobile_nav.opened .mobile_menu_bar::before {
transition: all .4s ease;
transform: rotate(90deg);
display: block;
}