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)
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.
To create a hamburger menu:
- Go to Design - Layouts.
- In the Header container, add a new grid.
- Set up the grid and define the CSS-class: sd-hamburger-menu__grid.
- Add a block to the created grid.
- Select SD: Hamburger menu.
- 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.
- 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.
- 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.
- Click Create.
- 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: