Aggiungere scritta o immagine al menu hamburger 
Autore: Manipulus Mosca
Visite 3451,
Followers 3,
Condiviso 0
Volevo sapere se all'icone "hamburger" che richiama il menù a comparsa, utilizzata sopratutto nelle basse risoluzioni, posso aggiungere una scritta e/o un immagine. Giusto per non vedere solo l'icona "hamburger".
Graze
Postato il
prova con questo css, passo 1, avanzate, codice..., tab esperto...
<style>
#imMnMn.main-menu .hamburger-button {background-image: url('http://www.skeggia12.it/pc.png');}
#imMnMn.main-menu .hamburger-bar {background: transparent;}
</style>
la prima riga inserisce l'immagine al posto di quella di defalult...
la seconda, senza troppi fronzoli, rende trasparenti le tre stanghette...
Autore
ti ringrazio molto. E se volessi aggiungere all'immagine con le tre stanghette la scritta menù?
con i div generati da website, non mi viene in mente nulla di praticabile... l'unica cosa credo sia inserire con la prima riga del css che ti ho postato, una immagine con la scritta menu, nascondendo le tre barre... se mi viene in mente qualcosa te lo posto...
@Manipulus Mosca
Se vuoi una scritta sul menu, prova a leggere questo post: https://helpcenter.websitex5.com/it/post/132504
Autore
Perfetto. Ultima cosa, se invece volessi mettere scritta a sinistra dell'immagine?
devi lavorare sempre sullo pseudoelemento css before come ti é stato suggerito sopra; solo che devi identificare il blocco padre del menù e dargli uno stile inline block; non é sempre detto che si possa fare in una certa pagina con una determinata struttura senza scombussolare qualcosa.
altrimenti lo puoi prima wrappare in un div supplementare via jQuery e poi lavorare su quello
Autore
Vi ringrazio per i consigli, ma credo siano troppo difficili per le mie ridotte abilità. Grazie comunque
E' sufficiente aggiungere delle proprietà e valori alla stessa regola, come è scritto nel post linkato:
Quindi, con le dovute personalizzazioni, così:
<style>
@media screen and (max-width: 959px) {
.hamburger-button::after {
content: "menu";
position: absolute;
left: -36px;
top: 6px;
}
}
</style>
Autore
Grazie. Come sempre