Un cliente mi ha chiesto di rendere il menu del suo sito WordPress sticky anche da mobile. Premettendo che il menù era già sticky per la versione desktop, ho solo dovuto inserire il CSS apposito per la versione mobile. Di seguito però spiego come rendere il meú sticky, sia per desktop che per mobile.
Nota: se usi un builder come Elementor o Bricks, ormai questa operazione si può tranquillamente fare in modo nativo, senza CSS!
Mentre in questo articolo ho anche spiegato come risolvere l’errore LBRACE nel caso vi compaia quando modificate il vostro CSS.
Nell’articolo trovi
Versione desktop
Innanzitutto devi trovare il codice di riferimento per l’header del tuo template WordPress. Supponiamo che la classe del tuo header sia appunto .header, per rendere il menù sticky basterà inserire il seguente codice CSS:
.header {
position: fixed;
width: 100%;
z-index: 1000;
}
Versione Mobile
Per la parte mobile, stessa cosa: identificate la classe dell’header (in questo caso .header_mobile) e poi inserite:
.header_mobile {
position: fixed;
width: 100%;
z-index: 1000;
}
Ovviamente dovremo anche spostare tutto il blocco principale del contenuto (main container – main content) sotto l’header, che ora si sovrappone allo stesso. Per spostarlo basterà identificare la classe del contenuto principale (in questo caso .main_container) e spostarlo verso il basso prendendo come altezza quella del vostro menu. Ovvero, se il vostro menù ha un’altezza di 100px dovrete abbassare il main container di 100px.
.main_container {
padding-top: 100px; /* modifica la dimensione in base all'altezza del tuo header */
}
Admin bar sticky
Una cosa che mi irrita, è avere il menu mobile sticky ma non la barra admin di WordPress. Risolvere è semplice! Inserisci anche questo codice nel tuo css:
@media screen and (max-width: 600px) {
#wpadminbar {
position: fixed;
}
}
Tutto chiaro? Se ti restano ancora dubbi, puoi sempre contattarmi e richiedere un aiutino! 😉
