Shrinking Header

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. 

Guide

Open the header Design Editor by clicking on the header icon and selecting 'Edit Design'.

Enable the shrinking header by clicking the check button.

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 will appear in the shrinking header. The following widgets are the only widgets that will be displayed 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

Can I edit widgets when the header is shrunk?

No. You will have to scroll up to the top of the site in order to make edits in the header.

On what views and settings will the shrinking header be available?

The shrinking header is available on Desktop and Tablet views. Shrinking headers can only be toggled when the header is turned into a row. If the header is not a row and the template has a fixed header, the shrinking header option will not be available.

Will the shrinking header change the padding and margin spacing applied to the rows inside the header?

No, the shrinking header will shrink the header by setting the top/bottom padding and margins to 0, however, if there is spacing applied to the rows within the header, it will not change the padding and margins of these rows.

Will the design properties of the shrinking header override the row properties (ex: background color)? 

No, the row design properties will override the shrinking header properties. For example, if you set a row background in the header, the row background will display over the shrinking header background.

What if you have a widget in the header that does appear in the shrinking header?

If you have a widget placed in your header that is not compatible with the shrinking header, then an empty column will appear in place of the widget when the shrinking header is triggered.

Are empty rows displayed in the shrinking header?

Yes. Even if you remove the widget from a row to create an empty row, the padding and margins of the row will not disappear and will be displayed on the shrinking header.

What if I add a middle logo to the navigation or change the logo?

The middle logo will also decrease in size like the regular logo, but if you change the logo, you will have to redefine the logo size.

Will widgets be aligned to the row or the column?

Widgets will be aligned vertically to the middle of the column.

I can't see my shrinking header! What happened?

If the page length is the size of the view port, you won’t see the shrinking header. You must 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 and the shrinking header will not trigger.