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.

In the left panel, click Design, then click Site Layout.

In the Desktop section, select Expandable menu layout.

In the Tablet section, select the layout with the expandable menu.

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

Hover over the header, click Header, and then select Edit Design.

In the Layout section, 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:

On the Spacing tab, change the padding. The expandable menu can have up to 3 rows, and each one is fully customized.

If the Desktop and Tablet have the same site layout (both expandable or both top bar), all customizations are the same for both. In case they are different, each device needs to be defined separately.

If you do not see the header features mentioned above, you may be using the old header. To update to the new header, click the header in desktop and tablet view. An automatic backup is created when you update the header. This step only applies to existing sites. It does not pertain to new sites.

Hover over the header, click the Header label, and then select Edit Design. On the Layout tab, click the existing layout to select a menu layout. The mobile header offers layouts that display widgets such as social links, phone numbers, and more. The header layouts are fixed, so you cannot add new widgets, but you can edit or remove them.

When you add a store or use the multi-language feature, more layout options are available that include the icons for the store shipping cart and the multi-language feature. If you do not have the store or multi-language enabled, these layouts do not appear.

Click Left or Right for the Menu icon position.

To edit the expandable menu, open the menu in mobile view. The menu editor automatically opens for you to edit.

On the Layout tab, click the existing layout to select a menu layout. The expandable menu offers multiple layouts that can display the social links, contact information and more. You can add any widget to the expandable menu, add columns, sort the columns to be next to each other or on top of each other. However, when you switch from one layout to another, it deletes all content that you added into the menu, taking only the widgets in the chosen layout.

On the Style tab, you have the following options: