Shrinking Headers

Shrinking Header is a smaller version of the site header that keeps vital navigation information constant without confusing viewers as they scroll. It's a sticky header that shrinks logos and other header widgets. It helps webpages with wide headers and extensive scrolling.

When a user scrolls past the height of the header, the header gets smaller.

• If a column only has one visible widget, it is placed in the middle of the column vertically, and the top and bottom margins and padding are set to 0.
• If a column has more than one visible widget, the widgets aren't lined up vertically, and the padding and margins at the top and bottom are set to 10px.
• If there are empty rows with columns, the columns fill the full row.
• The min-height of the header is set to auto to support templates having a minimum height value in the header.

To change the appearance of a decreasing heading, do the following:

1. Hover over the header, then select Header, followed by Edit Design.
2. Click the Enable shrinking header toggle on the Shrinking Header tab. You can choose from the following options:
3. Show navigation row only.  When the header shrinks, show the navigation row. This feature only works with several header rows.
4. Background color. Change the header's background. Row background color overrides decreasing header color.
5. More header colors on scroll. Colorize text, links, icons, button text, and more.
6. Logo size. Change the header's logo or picture size (default is 66 percent ).
7. Change logo on scroll.  Choose a logo to show when you scroll.
8. Header spacing. Change the padding at the top and bottom of the shrinking header. You can change how far apart the headers are on each device.



If the shrinking header was active:

• The site scrolls down so that the logo and effects in the header can be seen as it gets smaller.
• The header is automatically set to have the "sticky header" feature.
• The header spacing sets the padding and margin to 0 at the top and bottom
• This only affects the header's padding and margin, not the rows inside the header.
  
• The percentage in the logo size bar determines how much the images in the header shrink (default is 66 percent ).
• Even if you change the header layout, the shrinking header settings won't change.
• Not all widgets work together and show up in the header when it gets smaller. The following widgets show up in a header that shrinks:
  
• 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

Just a few reminders:

• When the header is shrunk, you can't change the widgets.
• The design properties take precedence over the properties for shrinking the header. For example, if you set a row background in the header, it will show up on top of the background of the header that is shrinking.
• If you have a widget in the header that doesn't work with a shrinking header, the widget is replaced by an empty column.
• The shrinking header shows rows with nothing in them.
• If you can't see your shrinking header, it may be because your site doesn't have enough rows for you to scroll down and make the header shrink. The site won't scroll if there is only one row on the page.