Come formattare l'hamburger button 
Autore: danilo tomasettaChiedo scusa alla comunità per una domanda così apparentemente banale, ma oggi mi sono imbattuto mentre costruivo un nuovo sito nel problema di formattare l'hamburger button. Intendo il pulsante quadrato che fa comparire l'hamburger menu. Ho letto la guida on line, nella quale a quanto ho capito si dice che lo stile dell'hamburger button dipende dallo stile assegnato ai pulsanti nelle impostazioni generali, ma nonostante svariati tentativi il maledetto bottone continuava a presentarsi in modo non conforme alle mie aspettative. Io ho bisogno di assegnargli un colore di sfondo e un colore alle 3 linee orizzontali. Inoltre è possibile determinare le dimensioni di questo bottone o vengono assegnate di default dal programma ?
ringrazio fin d'ora chi riuscirà a mettermi sulla strada giusta
il colore delle linee lo prende dal colore del testo dei menu....l'altezza basta allargare i margini verticali dei menu... e lo sfondo lo prende dal colore dello sfondo dei menu... ovviamente parlo di quelli desktop...
Guarda se può tornarti utile questa discussione
https://helpcenter.websitex5.com/it/post/195776
Autore
Ringrazio entrambi, ma in particolare Esse Di, che mi ha linkato una discussione dove è inserito anche un codice CSS che riguarda lo stile dell'hamburger button. A questo proposito ti chiedo se potresti spingerti ad arricchire questo codice anche con i parametri che riguardano, oltre alle dimensioni del pulsante e delle barre interne, anche il colore delle sfondo, il colore delle barre ed eventualmente colore e spessore di una linea di contorno.
Ai tecnici incomedia suggerirei invece di agevolare la formattazione dell'Hamburger button inserendo un menu di formattazione contestuale che ne determini lo stile a prescindere dai colori e dalle dimensioni usati per il menu principale e dallo stile impostato per altri pulsanti. A me sembra davvero poco logico vincolare lo stile dell'hamburger button allo stile del menu principale...
Con questo codice regoli anche il colore dello sfondo e delle barre
<style>
.hamburger-button {
width: 30px !important;
height: 30px !important;
background-color: #FF0000 !important; // rosso
}
.hamburger-bar {
width: 65%;
height: 10% !important;
background-color: #FFFF00 !important; // giallo
}
</style>
Mi sono accorto che il codice funziona solo in anteprima e con Chrome. In FF e Edge non visualizza le barre.
Inoltre contiene un errore nei commenti. A posto di // rosso e // giallo occorre scrivere /* rosso */ e /* giallo */
Oltre alla correzione dei commenti (che possono anche semplicemente essere eliminati), occorre sostituire height: 10% con height: 5px.
In questo modo dovrebbe funzionare. Quando sarò di nuovo davanti al PC farò prove più approfondite
Autore
Grazie per ora. Intanto farò anch'io qualche smanettamento
Il codice sottostante regola bordo, sfondo e barre dell'hamburger menu
Testato con le ultime versioni di Firefox, Chrome e Edge
<style>
.hamburger-button {
width: 30px !important;
height: 30px !important;
background-color: #FF0000 !important;
border: 2px solid #00FF00 !important;
border-radius: 5px !important;
}
.hamburger-bar {
width: 65% !important;
height: 4px !important;
background-color: #FFFF00 !important;
}
</style>
Autore
Grande Esse Di e complimenti !