Overview

You can add an expandable menu on your desktop and tablet sites, making it easy to create modern sites that have great design flexibility. Choose from several expandable menu layouts, and customize them as you like, adding widgets, rows, and columns.

The expandable menu layout for mobile offers more customizations and a way to display widgets in the header and a menu that is always visible.

You can change the layout of the header to a predefined layout that includes buttons, click to call, store cart, social icons, and more. You can add any widget to the expandable menu from the widgets panel.

Guide

To select an expandable menu layout for your site:

In the left panel, click Design.
Click Site Layout.
In the Desktop section, select Expandable menu layout.
In the Tablet section, select the layout with the expandable menu.

Desktop & Tablet Header

After selecting the expandable menu layout, a hamburger icon displays in your site header. Click the hamburger icon to see the expandable menu.

To edit location of the expandable menu in the header:

Hover over the header, click Header, and then select Edit Design.
In the Layoutsection, click Left or Right.

To configure the expandable menu:

Click the hamburger icon to open the Menu Design editor.
On the Layout tab, click the existing layout to select a menu layout.
On the Style tab, you have the following options:
- Enter from. Select Top or Side.
- Entrance effect. Select Cover or Push.
- Width. Move the slider to set the width of the expandable menu when expanded. The width of the menu is defined in percentages to fit all screen sizes.
- Background. Configure the background color or image.
- Close icon color. Select a color for the close icon, and close icon background color.
On the Spacing tab, change the padding.

The expandable menu can have up to 3 rows, and each one is fully customized.

Considerations

What if I have different header layouts for desktop and tablet views?

If you have different header layouts for each view (for example, a top bar header on a desktop and an expandable menu on a tablet), the editing you do on each header will be independent. If both desktop and tablet use the same header layout, edits to one header will be applied to the other header.

I don’t have the header features mentioned in this article. Where do I find them?

If you don’t see the header features mentioned above, you may be using the old header. To update to the new header, click on the header in desktop and tablet view. An automatic backup is created when you update the header.

Note: This step only applies to existing sites. It does not pertain to new sites.