Header 1

In questa pagina creiamo un classico header con background trasparente in sovrapposizione ad una immagine; un effetto semplice, molto utilizzato ed apprezzato.

Allo scroll della pagina l'header, fisso in alto, riprende un colore di sfondo.

L'immagine di sfondo all'header è realizzata con un modulo personalizzato pubblicato nella posizione "Title" del template.

Queste le regole css per ottenere l'effetto.

La prima regola impone la trasparenza all'header:

#sp-header { 
background: transparent; 
height: 60px; 
box-shadow: 0 0px 0px; 
}

Da notare che nella regola è stato tolto il box-shadow che creava l'ombreggiatura sul bordo inferiore dell'header (ombreggiatura che in questo contesto non ha senso mantenere), il cui css originario era:
box-shadow: 0 3px 3px rgba(0,0,0,0.05);

La seconda stabilisce il colore di background dell'header quando la pagina scrolla e l'header diviene sticky:

#sp-header.header-sticky { 
position: fixed; 
z-index: 9999; 
background: #dae0ee; 
box-shadow: 0 3px 3px rgba(0,0,0,0.05);
}

Come si può vedere, nella posizione sticky è stato ripristinato il box-shadow, soluzione che aiuta a staccare l'header dal contenuto della pagina, soprattutto quando i colori dell'header e del body hanno colori poco contrastanti. Va da sé che al posto del box-shadow si può impostare un semplice bordo colorato.

Dato che nella configurazione standard del layout del template la posizione modulo "Title" si trova immediatamente sotto all'header, si rende necessaria una terza e ultima regola che serve a "portare verso l'alto" il div del Title in una misura pari all'altezza dell'header (di default impostata a 60px). Come si può vedere qui sotto, basta semplicemente imporre un margin-top con valore negativo:

#sp-title { 
min-height: 0; 
margin-top: -60px; 
}


Stampa   Email