Set up compact header
Compact Header allows you to create a condensed version of your site’s header that appears as users scroll down the page. This feature gives your customers continuous access to the functionality built into the page header, such as search, cart and navigation, as they explore the content on your site. You can enable and configure Compact Header in Content Administration.
Example standard header:
Example compact header:
Enable Compact Header
Compact Header does not show by default and must be enabled in the Style Guide.
- In Content Administration, click the Style Guide
- Scroll down to COMPONENTS and click Header.
- Click Compact Header.
- Toggle on Enable Compact Header.
- On the General tab, establish the desired trigger point in pixels. This sets the point on the page where the compact header will appear; it does not appear on page load. You can also configure the background color and link color as needed.
- On the Drop Shadow tab, use the toggle to enable or disable drop shadow for your compact header.
- On the Border tab, use the toggle to enable or disable a border on your compact header.
- Click Save in the upper left corner.
Note
Below 768 pixels in width, Compact Header will disappear.
Configure widgets in Compact Header
Compact Header appears on the pages tab after it is enabled in the Style Guide.
- Click the Pages
- Select Compact Header.
- Click the Edit button in the upper-right corner.
Edit individual elements as needed.
You can add the following elements using the Add Widget modal: Cart, Flyout, Logo, Main Navigation, and Search.
Configure Cart widget
Click the Edit button to configure the Cart widget. You can show the cart label, icon or both, and you can set the shopping cart icon to None, Bag, Cart or Truck.
Configure Flyout widget
Click the Edit button to configure the Flyout widget. Note that this menu will not mirror the main navigation menu.
You can edit the destination and override the title (optional); selecting the cascade and mega menu options will not impact flyout widget functionality. You can also determine whether the link opens in a new window and choose to show a link to Quick Order.
Configure Logo widget
Click the Edit button to configure the logo in your compact header. You can change the existing image to an existing one in your files, delete the existing logo image and provide a URL for the logo image. You can also toggle on Mobile Specific Image, which provides additional options for adding an image from your existing files or providing a URL for a mobile logo.
Configure Main Navigation widget
Click the Edit button to configure the main navigation in your compact header. Click the Add button to add links to pages. You can edit the link type (link, mega menu, or cascading menu), destination and override title (optional), and determine whether the link opens in a new window. You can also choose to show a link to Quick Order.
