Sticky Menu

Buy now

Overview

Make it easier for your customers to navigate in your store with our Sticky Menu add-on. It will make your menu (or any element you choose) stay visible at the top of the screen when users scroll the page up or down.

Include the website’s core functionalities in the sticky bar to allow users to find exactly what they look for in no time flat.

You can make any element stick at the top via layout settings. Show your logo, a search field, and cart content always on top:

Check out how it looks like on our Urban Shift theme. The sticky menu here includes a Hamburger menu, search field, profile information, and cart content.

Read further to learn how to create a sticky menu in just a few clicks!

Compatibility

The add-on is compatible with CS-Cart and Multi-Vendor 4.3 and above, but only versions 4.11.x, 4.12.x and 4.13.x are supported. PHP 7.1 and higher is required.

Don’t know what archive to download to install the add-on? Read here.

Support

This add-on is developed and published by Simtech Development Ltd., a CS-Cart developer. You are guaranteed a quality add-on supported by future versions. If you need help, please contact us via our help desk system.

Managing in the admin panel

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 SD: 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 SD: 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 SD: 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: