Genesis: Creare una top bar prima della intestazione (sticky)

Chissa quante volte avrete pensato di creare una strip, o una riga utile sopra l’intestazione (header) di un tema WordPress e magari di un tema child Genesis.  A me è capitato molte volte e molto spesso sono dovuto ricorrere a dei plugin, ma stavolta ho deciso di trovare una soluzione personalizzata.

A cosa può servire una “top bar” da posizionare sopra l’header del tema? Gli usi possono essere molteplici:

  • un menù personalizzato
  • il collegamento per il login o l’account degli utenti
  • una casella di ricerca
  • il carrello di un ecommerce
  • una semplice riga di informazioni

oppure qualsiasi altra cosa che vi possa venire in mente per personalizzare il vostro sito web.

Creazione del Widget

Andiamo a creare la nostra area e nel mio caso mi è venuto in mente di farne due, una a sinistra ed una a destra, e quindi creiamo una “top bar” area che sarà divisa in due, una parte a sinistra “Top bar left” ed una parte a destra “Top bar right” e per farlo inseriamo questo snippet di codice nel file functions.php del nostro tema:

Non appena salvato, nel backend del nostro Genesis Child Theme, alla voce Aspetto —> Widgets compariranno due nuove aree, appunto “Top Bar Left” e “Top Bar Right” dove poter inserire testo, codice HTML o altro.

Ma ancora queste aree non saranno visibili nel frontend del nostro sito web, per renderle visibili dobbiamo inserire ancora un po’ di codice nel file functions.php:

Ora sarà visibile la nostra “top bar”, ma per avere infine il corretto risultato sarà necessario inserire gli opportuni aggiustamenti visivi tramite CSS:

Finalmente otteniamo il risultato sperato, ma cosa succede se il nostro header è “sticky”, ovvero fisso in cima al nostro sito web?
Questo potrebbe essere un problema perchè ci ritroveremmo l’header fisso ed invece la “top bar” che scorre insieme alla pagina.
La cosa si può risolvere sempre tramite CSS, mettendo sticky anche la “top bar” aggiungendo al codice CSS queste istruzioni:


.top-bar {
/* Fixed Options */
z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;
}

Un riepilogo di tutto il codice lo potete trovare a questo Link/Gist con tutti i codici del tutorial

2 commenti su “Genesis: Creare una top bar prima della intestazione (sticky)”

  1. Salve, ho inserito tutto il codice è funziona ma quando aggiungo la parte per renderlo fisso e cioè : .top-bar {
    /* Fixed Options */
    z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;
    }

    mi scompare dal sito il contenuto che c’era nel widget.nella brarra (avevo inserito i social)
    Io uso genesis samle,
    grazie
    saluti

    Rispondi
    • Questo può essere un altro problema, se ti serve una mano indicami il sito e dammi più info, se vuoi contattami in email attraverso il form del mio sito, se posso ti do volentieri una mano.

      Rispondi

Lascia un commento