Hamburger menu senza le tre lineette 
Auteur : Corrado B.
Visité 51,
Followers 0,
Partagé 0
Buonasera a tutti i lettori.
Cercavo di sostituire le tre lieette classiche dell'Hambuirger menù con una banale icona contenete un piccolo testo.
Non trovando il modo per sostituirla avevo pensato di rintracciare la icona originale e sostituirla con la mia nuova dandogli lo stesso nome ma...non riesco a trovarla!
C'è un modo per poterlo fare?
Grazie anticipatamente.
Il sito è ancora da pubblicare
Posté le
... non ci perdo tempo più di tanto, avendo già le mie vecchie ed immediate soluzioni EXTRA esclusive ormai note e a disposizione di tutti...
... comunque potresti mettere una immagine/icona a fianco o sopra o sotto all'hamburger, ed avresti risolto con estrema semplicità...
...oppure, se ti interessa provare le mie invenzioni (CSS o JS) con un solo click, posta il tuo LINK, ...ed avvisami, ...e io tornerò qui, ...poi nel caso sarà semplicissimo da applicare e facilmente personalizzabile...
... immagine + con o senza testo:
.
ciao
.
Se vuoi testare velocemente il codice è anche commentato per facilitare la modifica
codice da inserire Step 1 Statistiche e codice, prima della chiusura del tag Head
nel caso l'oggetto menù sia come ID #imHeader_imMenuObject_01
<style>
/* 1. Trasformiamo il pulsante in un contenitore per il testo */
#imHeader_imMenuObject_01 .hamburger-button {
background-image: none !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
width: auto !important; /* Permette alla larghezza di adattarsi al testo */
min-width: 60px !important;
height: 40px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-decoration: none !important;
}
/* 2. Inseriamo la scritta MENU */
#imHeader_imMenuObject_01 .hamburger-button::before {
content: "MENU" !important;
color: #000000 !important; /* Cambia il colore qui (es. #FFFFFF per bianco) */
font-family: sans-serif !important; /* Inserisci il font del tuo sito */
font-size: 16px !important;
font-weight: bold !important;
letter-spacing: 1px !important;
display: block !important;
}
/* 3. Cambia la scritta in "CHIUDI" quando il menu è aperto (opzionale) */
#imHeader_imMenuObject_01 .hamburger-button.open::before {
content: "CHIUDI" !important;
color: #cc0000 !important; /* Colore diverso quando aperto */
}
/* 4. Nascondiamo le barre originali di WebSite X5 */
#imHeader_imMenuObject_01 .hamburger-bar,
#imHeader_imMenuObject_01 .hamburger-button div,
#imHeader_imMenuObject_01 .hamburger-button span {
display: none !important;
}
</style>