Le dimensioni del pulsante del menu hamburger vengono "ereditate" dalle dimensioni del font scelto per il menu principale.
In alcuni casi (per esempio usando font particolari) il pulsante del menu può risultare troppo piccolo.
Possiamo regolare le dimensioni variando il margine verticale in "Stile del Menu Principale".
Se queste modifiche dovessero alterare troppo l'aspetto del menu principale, si può agire via codice.
Possiamo inserire un codice CSS, tipo questo, al
Passo 4 - Statistiche, SEO e Codice - Esperto - Prima della chiusura del tag HEAD:
<style>
@media screen and (max-width: 719px) {
#imMnMn .hamburger-bar {
height: 4px;
margin: 4px auto;
width: 100%;
}
}
</style>
In rosso le parti del codice da personalizzare.
719 è il breakpoint dove si visualizza il pulsante.
Gli altri valori riguardano rispettivamente, in ordine: altezza delle linee, margine tra una linea e l'altra e la larghezza, che può essere anche espressa con altre unità di misura.
Se abbiamo impostato un colore di sfondo alle voci del menu principale, dobbiamo anche aumentare le dimensioni dello sfondo del pulsante del menu hamburger.
In questo caso possiamo usare una regola CSS, tipo questa, da aggiungere al codice precedente (
all'interno della media query) :
#imMnMn .hamburger-button {
background: grey url("");
padding: 2px 6px;
}
I valori in rosso sono da personalizzare.
WS genera un'immagine con lo stesso colore dello sfondo del menu, quindi dobbiamo annullare tale immagine perché troppo piccola.
grey è il colore dello sfondo e con i valori di padding regoliamo rispettivamente altezza e larghezza.
Ovviamente possiamo aggiungere altre proprietà e valori per personalizzare ulteriormente il pulsante, utilizzando gli stessi selettori.
