Header and Expandable Menu

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 Move Elements, and customize them as you like, adding Widgets, rows, and columns.

The expandable menu Move Element 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 Move Element of the header to a predefined Move Element 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.

Desktop and Tablet

Select the Expandable Menu Layout

To select an expandable menu layout for your site:

1. In the left panel, click Theme.
2. Click Site Layout.
3. In the Desktop Predefined Section, select Expandable menuMove Element.
4. In the Tablet Predefined Section, select the Move Element with the expandable menu.

Desktop and 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:

1. Hover over the header, click Header, and then select Edit Design.
2. In the Move ElementPredefined Section, click Left or Right.

Desktop and Tablet Expandable Menu

To configure the expandable menu:

1. Click the hamburger () icon to open the Menu Design editor.
2. On the Move Element tab, click the existing Move Element to select a menu Move Element.
3. 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.
4. On the Blank Space tab, change the inner spacing.

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

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.

Mobile Header

To edit the mobile header:

1. Hover over the header, click the Header label, and then select Edit Design.
2. On the Move Element tab, click the existing Move Element to select a menu Move Element. The mobile header offers Move Elements that display Widgets such as social links, phone numbers, and more. The header Move Elements 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 Move Element 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 Move Elements do not appear.
3. Click Left or Right for the Menu icon position.

Mobile Navigation

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

1. On the Move Element tab, click the existing Move Element to select a menu Move Element. 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 Move Element to another, it deletes all content that you added into the menu, taking only the Widgets in the chosen Move Element.
2. On the Style tab, you have the following options:
   • Enter from. Select Top or Side. When Top is selected, move the height slider. When Side is selected, move the width slider.
   • Entrance effect. Select Cover or Push.

Updates to Mobile Layouts

To update the new mobile view header, click the header in mobile view. An automatic backup is created when you update the header.