Breadcrumbs

Header 3

Qui partiamo da una situazione in cui l'header è stato impostato con un'altezza pari a 100px, superiore ai 60px che costituiscono la misura settata di default in Helix Ultimate.
Da notare che, diversamente da Helix3, tale valore può essere modificato direttamente dal backend del framework alla voce "Header" del menu "Basic", senza quindi dover ricorrere a regole css custom.

Oltre ad aumentare l'altezza dell'header, è stato ingrandito di conseguenza anche il logo: si tratta del logo di Helix Ultimate che si trova nei presets del template, e che è nel formato SVG (una delle tante, nuove feature del template).
Per default è impostato a 36px, ma qui è stato portato a 80px. Da notare che anche in questo caso l'impostazione è stata variata dal backend, alla voce "Logo", sempre nel menu "Basic".

Quello che cerco di fare qui è di diminuire l'altezza dell'header allo scroll della pagina, portandolo da 100px a 50px, e allo stesso tempo rimpicciolire il logo per farlo rientrare nell'altezza dell'header, riportandolo agli originari 36px.

Queste le regole css necessarie per raggiungere l'obiettivo:

/* L'altezza dell'header, quando si blocca in cima alla pagina, è ora impostata a 50px */
#sp-header.header-sticky { 
height: 50px; 
}
/* Questa regola impone un line-height, pari alla nuova altezza dell'header, che permette così di allineare al centro
le voci di menu e l'icona sandwich del menu mobile */ #sp-header.header-sticky .sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span, #sp-header.header-sticky #offcanvas-toggler { line-height: 50px; }
/* Qui la dimensione del logo viene riportata a 36px e l'immagine viene anche centrata nella nuova misura dell'header */
#sp-header.header-sticky .logo-image { 
height: 36px; 
margin-top: -43px; 
}

Se si preferisce, come nell'esempio di questa pagina, una transizione morbida quando l'header si restringe una volta raggiunta la posizione "sticky" in cima alla pagina, basta inserire questo codice nelle tre regole css precedenti:

transition: all ease-out 0.5s; 
-webkit-transition: all ease-out 0.5s;

Stampa   Email