Sticky Menu¶

Compatibility¶

The add-on is compatible with CS-Cart and Multi-Vendor 4.10 and above, but only versions 4.12.x and above are supported. Minimum required PHP version is 7.1.

See more information about compatibility of our add-ons here.

Support¶

You are guaranteed a quality add-on supported by future versions. If you need help, please contact us via our help desk system.

Installing the add-on¶

Install the Sticky Menu add-on on the add-ons list page (“Add-ons” → ”Manage add-ons”). Click the + button in the top right corner, select an archive, and click Upload & install. You can now find the installed add-on in the list of installed add-ons, just make sure it is set to Active.

Setting up the add-on¶

To set up the add-on, configure the following settings:

• License key—Enter the license key to activate the add-on. You will receive this key in the order confirmation email. You can also see license keys for all your purchased add-ons in your HelpDesk account.

• Background color—Choose the color for the sticky grid.

  

• Animation duration (ms)—Set up how fast the sticky panel will appear in milliseconds. The larger this number is, the slower it will move forward.

• Scroll direction for panel display—There are two possible scenarios here. The sticky panel may appear when the customer scrolls the page up or down. Here is how it looks like when the Up option is active:

  

The sticky bar appears only when the user scrolls the page down and then scrolls it up. This mode is useful for menus: make the menu sticky to improve navigation for customers who intend to leave that page.

And here is the example of the Down option activated. The menu appears immediately when the user scrolls the page down.

Creating a sticky menu¶

You can make any existing grid of the layout stick to the top by choosing the Sticky header option in the Wrapper field in the grid options.

Attention

If you make some grid sticky, it will disappear from the page and will be shown only in the sticky panel.

If you want to show the grid both on the page and in the sticky menu, duplicate it in the layout settings:

For example, you would like to create a sticky menu panel with a menu.

1. Add an additional grid to the header or top panel and select the Sticky header option in the Wrapper

2. Add the new menu block and set it up according to your needs (you can change its filling following the CS-Cart documentation)

Here is the result on the desktop:

And on mobiles:

Creating a bar with several elements¶

Let’s create a menu with a logo, a search field, and a cart like this:

1. Navigate to Design > Layouts.
2. Add a grid with the Sticky header option activated to the top panel or header. Add 3 grids inside it and fill them with the desired blocks. In our case, they are the Logo, Search, and Cart content blocks in the grids with width 3, 11, and 2 accordingly.

3. Set up the display of grids on different devices if necessary.

Here’s the result on desktop:

And on mobiles: