The Shrinking Header is a smaller version of the site header, enabling you to keep important navigation information fixed without distracting users as they scroll down a page and without taking up too much space. It acts as a sticky header feature, but condenses the size of the logos and other
s in your header. It is particularly useful in sites that have large headers and sites that are designed for long scrolling.Once the user scrolls passed the header height, the header shrinks.
- If columns have one visible , the is centered inside the column vertically and the top/bottom padding and margins are set to 0.
- If columns have more than one visible , the s are not aligned vertically and the top/bottom padding and margins are set to 10px.
- If there are empty rows with columns, the columns span the entire space of the row.
- To handle templates with a minimum height value in the header, the min-height of the header is set to auto.
To edit the design of a shrinking header:
- Hover over the header, click “Header”, and then click “Edit Design”.
- On the Shrinking Header tab, click the “Enable shrinking header” toggle. You have the following options:
- Show navigation row only. Only display the row with navigation when the header shrinks. This feature is only applicable if there is more than one row in the header.
- Background color. Change the background color of the shrinking header. Note that the row background color overrides the shrinking header background color.
- More header colors on scroll. Specify colors for the text, selected link & hover, icons, button text, and more.
- Logo size. Change the size that the logo or image shrinks to when the header shrinks (default is 66%).
- Change logo on scroll. Select a logo to display on scroll.
- Header spacing. Adjust the top and bottom padding of the shrinking header. You can change the header spacing per device.
When the shrinking header is activated:
-
- The site scrolls down in order to display the shrinking header logo and effects.
- The sticky header feature is automatically applied to the header.
- The header spacing changes the top/bottom padding, and margin to 0.
- Images in the header shrink to the percentage in the logo size bar (default is 66%).
- Switching the header layout does not change the shrinking header settings.
- Not all
- Navigation
- Multi-Language widget
- Social Icons
- Click to Call button
- OpenTable button
- Click to Email button
- vCita
- PayPal button
- FaceBook Like button
- Images and Logos
- Store Cart
- Paragraph widgets
- Title widgets
- Buttons
s are compatible and appear in the shrinking header. The following s display in a shrinking header: