Hamburger Menu

Overview

The Hamburger Menu add-on allows you to create a little three-lined button that hides the traditional menu. Clicking the button opens the site navigation which contains links to pages all over the website.

It’s a great solution to handle navigation on smaller screens. It keeps the screen clean and saves valuable space.

The look and feel of the menu is customizable. You can change the colors for the button and menu background, pick colors for the first, second and third level items.

The content of the hamburger menu may vary:

  • Quick links
  • Main menu
  • Footer items (e.g. blog, reviews, about us, sitemap)
  • Footer items of create orders (e.g. delivery and payment, returns)

Compatibility

The add-on is compatible with CS-Cart and Multi-Vendor 4.3.x and above.

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 the 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 Hamburger 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.

Creating a hamburger menu

To create a hamburger menu:

  1. Go to Design - Layouts.
  2. In the Header container, add a new grid.
  1. Set up the grid and define the CSS-class: sd-hamburger-menu__grid.
  1. Add a block to the created grid.
  1. Select SD: Hamburger menu.
  1. In the General tab, give a name for the block. Then click Settings and specify the maximum number of second and third level elements that will be shown in the menu.

Example: If you specify 6 for the second level elements and you have more than 6 elements, the More [...] link will be shown.

As for third level elements, the View more link will be shown.

  1. In the Content tab, select what content you’d like to show: quick links, main menu, shop (footer), create orders (footer). Click Manage menus if you want to add new links or remove some of the existing ones.
  1. In the Block setting tab, configure the look and feel of the menu.
  • Menu position—Choose where the menu will appear: from the left side or the right side.
  • Menu size—Select a suitable size for the menu: small or big.
  • Close button position—Choose a position for the close button in the menu: left or right.
  • Enable overlay—Select the box if you want to show an overlay when the menu opens. So the page will be darkened with the focus on the menu.
  • Overlay direction—Choose direction for the overlay effect: from left to right or from right to left.

Configure the rest of the settings by picking desired colors for the button background, menu background, etc, or use default colors.

  1. Click Create.
  2. Change the width of the other grids so that in total they take up 14 columns (as the hamburger menu takes 2 columns). Optionally, you can hide the Main menu.

Here’s the result: