The resizable header is a smaller version of the site header, which allows you to keep important navigation information fixed without distracting users while scrolling the page and without taking up too much space. It works like a fixed header, but it reduces the size of logos and other in the header. It is particularly useful on sites with large headers and on sites designed for long scrolling.
Note:
The collapsible header is available on desktop and tablet only when using the top bar header layout.
Quando l'utente scorre oltre l'altezza dell'intestazione, quest'ultima si riduce.
- Se le colonne hanno un visibile, il è centrato verticalmente all'interno della colonna e il padding superiore/inferiore e i margini sono impostati a 0.
- Se le colonne hanno più di un visibile, i non sono allineati verticalmente e la spaziatura interna superiore/inferiore e i margini sono impostati a 10px.
- Se sono presenti righe vuote con colonne, queste occupano l'intero spazio della riga.
- Per gestire i modelli con un valore di altezza minima nell'intestazione, l'altezza minima dell'intestazione è impostata su auto.
Per modificare il design di un'intestazione ridimensionabile:
- Passa il mouse sopra l'intestazione, fai clic su Intestazione, quindi fai clic su Modifica il design.
- Nella scheda Intestazione riducibile, fai clic su Abilita la riduzione dell'intestazione Attiva/disattiva. Hai le seguenti opzioni:
- Mostra solo la riga di navigazione. Visualizza la riga con la navigazione solo quando l'intestazione si riduce. Questa funzione è applicabile solo se nell'intestazione sono presenti più righe.
- Colore di sfondo. Modifica il colore di sfondo dell'intestazione che si riduce. Tieni presente che il colore di sfondo della riga ha la precedenza sul colore di sfondo dell'intestazione che si riduce.
- Più colori per l'intestazione scorrendo la pagina. Specifica i colori per il testo, il link selezionato e al passaggio del mouse, le icone, il testo dei pulsanti e altro ancora.
- Dimensioni del logo. Modifica le dimensioni a cui il logo o l'immagine si riducono quando l'intestazione si riduce (il valore predefinito è 66%).
- Cambia il logo durante lo scorrimento. Seleziona un logo da visualizzare durante lo scorrimento.
- Spaziatura dell'intestazione. Regola la spaziatura superiore e inferiore dell'intestazione che si riduce. Puoi modificare la spaziatura dell'intestazione per ogni dispositivo.
Quando l'intestazione retrattile è attivata:
- The site scrolls down to show the header logo shrinking and its related effects.
- The fixed header function is automatically applied to the header.
- The header spacing changes the top/bottom padding and margin to 0.
Note:
This changes the padding and margin of the header, and not of the rows within the header.