CS-Cart Sticky Header & footer

When scrolling on a page, usually the menu and other important elements placed inside the header are not visible anymore. Using this sticky header you can choose to display the same, or a different header when the user scrolls.

The sticky header and footer can be displayed on full width, or fluid grid. If you are using a fixed width, use the fluid setting. This will take the exact same width as your CS-Cart.

You can customize the distance in pixels which will trigger the header. The default is 80px, this means when a user will scroll 80 pixels from top, the header will appear. The header will disappear in case the user will scroll back up within the 80px distance from top.

Exactly the same thing will happen with the footer, this will disappear if the user reaches the bottom of the page. Additionally the footer has the option to hide/show by any user, and this will remain as selected until further actions.

By default, 2 more grids will appear in your "Layouts/ Default location" with the following classes:

Header: sticky-header-wrapper

Footer: sticky-footer-wrapper

Those grids will contain default blocks from CS-Cart. (logo, search, cart for header, copyright and payment methods for footer )

You can use inside the header and footer ANY CS-Cart block you want, it can be your logo, search, minicart, account, or any other blocks. Also, you can create other grids inside and restructure it.

In our demo, we added another grid on top to display a custom html information and the quick links.

From addon settings you can customize the appearance individually for your header and footer. Tool-tips are present for all settings to explain them.

Display size: Full screen / Fixed width

Height to trigger it in px

Background Color Opacity :
Shadow :
Border :
Border Bottom Size :
Shadow Height :
Shadow and Border Color :
Shadow and Border Color Opacity (0-1) :
Padding :

The addon is compatible with all major browsers.