Shrinking Headers

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.

Note

The shrinking header is available on desktop and only for tablet when the top bar header layout is used.

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:

  1. Hover over the header, click Header, and then click Edit Design.
  2. 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 inner spacing, and margin to 0.
    • Note

    This changes the inner spacing and margin of the header, and not the rows inside the header.

  • 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 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
NoteS
  • 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.