Warning Cookies are used on this site to provide the best user experience. If you continue, we assume that you agree to receive cookies from this site. OK
Save 20%

CS-Cart Sticky Header & Footer

List price: 55.90 
You save: 11.00 € (20%)

This product is electronically distributed.


View Online Demo  

You will need to scroll at least 80 px in order for the sticky header to appear. To login in admin area use standard cs-cart path /admin.php and standard cs-cart user/pass - admin,admin

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.

Installation Guide

Before you proceed to the next step please make sure you have the appropriate permissions for the following CS-Cart files and directories:

Cs-cart version 3.x THIS IS A MUST!!!

/addons - read/write/execute for all users (777)

/images (and all its subdirectories) - read/write/execute for all users (777)

/skins - read/write/execute for all users (777)

/var (and all its subdirectories) - read/write/execute for all users (777)

Cs-cart version 4.x THIS IS A MUST!!!

/app/addons 777 | default is 755

/js/addons 777 | default is 755

design/backend/css/addons 777 | default 777

design/backend/mail/templates/addons 777 | default 777

design/backend/media/images/addons 777 | default 777

design/backend/templates/addons 777 | default 777

/var/themes_repository/basic/css/addons 777 | default 777

/var/themes_repository/basic/mail/templates/addons 777 | default 777

/var/themes_repository/basic/media/images/addons 777 | default 777

/var/themes_repository/basic/media/fonts/addons 777 | default 777

/var/themes_repository/basic/templates/addons 777 | default 777

Instalation: Please verify your cs-cart version adding to your store url /?version Ex: www.domain.com/?version
The return will be something like this: CS-CART: version X.X.X (ex: 3.0.1 or 4.1.2)

In your downloads section, you will find Seonid Installer
Please download the Seonid Installer correctly for your cs-cart version

1. Unzip the files.
2. Copy/Paste the folder addons from archive directly to your site root (do overwrite if it asks you)
3. In administration area, go to Administration / Add-ons and install the addon Seonid Installer.
4. In administration area, under Add-ons menu, you will find Seonid Updates check. Click it. You will be prompted with a notification to install the addon purchased.

Note*. The notification will appear, if you entered the "domain" name correctly when you purchased the add-on

We allow all our customers a test domain for further development or testing. Please send your dev domain as a comment when you purchase the product (DO NOT add it in the licensed domain input field)