Personalizzare l’icona hamburger nella versione mobile di Divi

Introduzione
Se usi il tema Divi per il tuo sito WordPress, sai che nella versione mobile il menu principale viene sostituito da un’icona a forma di hamburger, ovvero tre linee orizzontali. Questa icona è molto comune e funzionale, ma forse vorresti personalizzarla per dare un tocco di originalità al tuo sito. In questo articolo, ti mostrerò come personalizzare l’icona hamburger nella versione mobile del tema Divi con un’icona diversa, usando un semplicissimo codice CSS. Vedrai che è molto facile e veloce. Bene, iniziamo!
Come personalizzare l’icona hamburger nella versione mobile del tuo sito Divi
Tutti noi vorremmo offrire agli utenti del nostro sito web una buona esperienza e per fare ciò molto spesso dobbiamo fare dei ritocchi al nostro tema Divi che vanno oltre le impostazioni di default del tema.
L’icona hamburger di Divi standard si presenta in questo modo:
In questa breve guida vedremo come si fa a personalizzare l’icona hamburger nella versione mobile del tema Divi, quella del menu su mobile e tablet, per capirci. Infatti con un semplice snippet di codice CSS è possibile migliorare notevolmente l’esperienza utente e la navigazione del tuo sito web. Ecco il codice da inserire in Divi > Opzioni Tema> Generali> Codice CSS Personalizzato:
/*** SOSTITUIRE ICONA HAMBURGER MOBILE ***/
header span.mobile_menu_bar:before {
background-image: url('https://URLIMMAGINE.com');
color: transparent!important;
background-size: cover;
}
Ecco, ora hai imparato come modificare l’immagine standard del menu per dispositivi mobili per il tema Divi. Spero che questo post sia stato utile e tu abbia trovato delle informazioni utili su come personalizzare l’icona hamburger nella versione mobile del tema Divi. Ciao, alla prossima!