Header 4

Per ottenere questa versione con l'header sotto l'immagine full width (ma potrebbe essere un video, una slide, o qualunque altro contenuto) è necessario innanzitutto disabilitare dal "Layout Builder" i due header predefiniti di Helix Ultimate.
Una volta disabilitati bisognerà ricreare un header con le posizioni "logo" e "menu" (come da guida sul sito di JoomShaper), e poi creare una nuova posizione, o spostarne una già esistente, sopra l'header appena impostato.
In questo esempio ho utilizzato la sezione "title" che nel layout preimpostato si trova sotto l'header, spostandola con un praticissimo drag and drop.

Nel Layout Builder la posizione "logo" sta di default nella parte sinistra dell'header (e l'immagine è allineata al bordo sinistro del body), mentre il "menu" sta sulla destra con le voci di menu allineate al margine destro del body.
In questo esempio però ho voluto invertire le due posizioni (anche in questo caso con un semplice drag and drop), ma il risultato non è affatto convincente in quanto i due div mantengono il loro allineamento originale creando uno sgradevole effetto visivo (vedi immagine).

Per ovviare a ciò è necessario intervenire con due regole css che modifichino l'allineamento (parametro "float"), una per il div del menu e una per il div del logo:

.sp-megamenu-parent { list-style: none; padding: 0; margin: 0 -15px; z-index: 99; display: block; float: left; position: relative; }

#sp-header .logo { height: 60px; display: inline-flex; margin: 0; align-items: center; float: right; }

Una volte inserite le due regole si otterrà il risultato voluto e osservabile in questa pagina.

In realtà il lavoro non è ancora completo, in quanto lo stesso problema di allineamento si pone anche per l'icona del menu in modalità mobile (vedi immagine). E' quindi necessaria un'ulteriore regola css per correggere la posizione dell'Hamburger button:

#offcanvas-toggler { display: block; height: 60px; line-height: 60px; font-size: 20px; float: left !important; margin-left: 0px !important; }

A questo punto ho solamente aggiunto alcune regole css per modificare alcuni particolari del nuovo layout.
L'header, una volta spostato sotto la sezione full width, si distanzia dall'immagine di alcuni pixel; nulla di che, ma nel caso si preferisca non avere tale margine, basta utilizzare questa regola css:

#sp-header { margin-top: -16px; }

La regola svolge perfettamente il suo lavoro, ma allo "scroll down" della pagina l'header non può fare altro che mantenere il margin-top negativo per cui, quando si fissa in cima alla pagina risale della stessa misura di pixel, risultando quindi parzialmente nascosto.
Per ovviare a questo effetto collaterale indesiderato è necessaria, quindi, una seconda regola css:

/* Questa regola reimposta a 0 il margin-top dell'header quando raggiunge la posizione sticky */
#sp-header.header-sticky { margin-top: 0px; }

Anche in questa pagina quando l'header raggiunge la posizione sticky, lo fa con un effetto di morbida transizione verso il basso, realizzato inserendo lo stesso codice già utilizzato negli altri esempi.
La regola sopra assume ora questa forma:

#sp-header.header-sticky { margin-top: 0px; transition: all ease-out 0.5s; -webkit-transition: all ease-out 0.5s; }

Per concludere, un piccolo ritocco di stile che potrebbe essere necessario, o desiderabile, a seconda dei colori di background dell'header e del body. In questa pagina header e body hanno lo stesso colore di sfondo, cosa che allo scorrere della stessa potrebbe non piacere, mancando una linea di separazione tra menu e contenuto.
Anche in questo caso basta ricorrere ad un piccolo codice css che imposta un bordo inferiore di un colore nettamente contrastante (come in questa pagina), oppure si può settare un diverso colore di sfondo, o, perché no?, tutti e due.

Questa la regola con l'aggiunta di un sottile bordo inferiore di una tonalità di rosso:

#sp-header.header-sticky { margin-top: 0px; transition: all ease-out 0.5s; -webkit-transition: all ease-out 0.5s; border-bottom: solid 1px #ed0404; }


Stampa   Email