Overview
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 widgets 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 past the header height, the header shrinks.
If columns have one visible widget, the widget is centered inside the column vertically and the top/bottom padding and margins are set to 0.
If columns have more than one visible widget, the widgets 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 the scroll. Specify colors for the text, selected link & hover, icons, social icons button text, button background, 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 the scroll.
Header spacing. Adjust the top and bottom padding of the shrinking header. You can change the header spacing per device
What happens when the shrinking header is activated?
When the shrinking header is activated:
The site will scroll down a bit in order to display the shrinking header effects.
The sticky header feature is automatically applied to the header.
The header spacing will change the top/bottom padding and margins to 0. Please note that this changes the padding and margins of the header, not the rows inside of the header.
Images in the header will shrink to the percentage in the logo size bar (default = 66%). Please note that all images in the header will shrink to the logo size.
Switching the header layout does not change the shrinking header settings.
Not all widgets are compatible and appear in the shrinking header. The following widgets display in a shrinking header:
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
Design Customization Options
In the Design Editor, you can change the following settings to customize the shrinking header:
Only Show Navigation Row - only the row with the navigation will be displayed when the header shrinks. This feature is only applicable if there is more than one row in the header.
Logo Size - changes the size that the logo or image shrinks to when the header shrinks (default = 66%)
Background color - changes the background color of the shrinking header. Please note that the row background color overrides the shrinking header background color.
Header spacing - allows users to adjust the top and bottom padding of the shrinking header. You can change the header spacing per device.
What are some effects of a shrunk header?
Once the user scroll passes the header height the header will be shrunk. When the header is shrunk:
If columns have one visible widget, the widget will be centered inside the column vertically and the top/bottom padding and margins will be set to 0.
If columns have more than one visible widget, the widgets will not be aligned vertically and the top/bottom padding and margins will be set to 10px.
If there are empty rows with columns, the columns will take 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.
Considerations
You cannot edit widgets when the header is shrunk.
The design properties override the shrinking header properties. For example, if you set a row background in the header, the row background displays over the shrinking header background.
If you have a widget in the header that is not compatible with the shrinking header, an empty column appears in place of the widget.
Empty rows are displayed in the shrinking header.
If you cannot see your shrinking header, it may be because you do not have enough rows on your site to be able to scroll down on the site and trigger the shrinking header. If you only have one row on the page, the site will not scroll.