Support

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.


TIP: 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:
    仅显示导航行。页眉收缩时仅显示导航行。此功能仅在页眉中有多个行时适用。背景颜色。更改收缩页眉的背景颜色。请注意，行背景颜色会覆盖收缩页眉的背景颜色。滚动时显示更多页眉颜色。指定文本、选定链接和悬停、图标、按钮文本等的颜色。徽标大小。更改页眉收缩时徽标或图像收缩到的大小（默认为 66%）。滚动时更改徽标。选择滚动时显示的徽标。页眉间距。调整收缩页眉的顶部和底部填充。您可以更改每个设备的页眉间距。


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.
  • Note
  • This changes the padding 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.

Customer Support Hours

Mon - Fri, 9 am to 9 pm (CT)

Sat, 9 am to 6 pm (CT)

(Chat Unavailable on Saturdays)

iClassPro offices will be closed in observance of the following holidays:
New Year's 2024 (Jan 1, 2024), Good Friday (March 29, 2024), Memorial Day (May 27, 2024), Independence Day (Jul 4, 2024) Labor Day (Sep 2, 2024), Thanksgiving (Nov 28 - 29, 2024), Christmas (Dec 24 - 25, 2024)

Visit the Customer Support Page


Share by: