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 s, rows, and columns.
The expandable menu layout for mobile offers more customizations and a way to display s 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 to the expandable menu from the s panel.
IN THIS ARTICLE:
Desktop and Tablet
Select the Expandable Menu Layout
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 on the left.
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:
- Hover over the header, click “Header”, and then select “Edit Design”.
- In the Layoutsection, click “Left” or “Right”.
Desktop and Tablet Expandable Menu
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.
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:
- 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 s such as social links, phone numbers, and more. The header layouts are fixed, so you cannot add new s, but you can edit or remove them.
When you use the multi-language feature, more layout options are available that include the icons for the multi-language feature. If you do not have the multi-language enabled, these layouts do not appear. - 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.
- 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 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 s in the chosen layout. - 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
On September 8th, 2019 three mobile layouts were removed as they were not used very often. The two remaining layouts are more up to date and useful.
If you already have a site with one of the layouts that was removed and you select another layout, the layouts that have been removed will disappear, but you will be able to restore them from site backup.
To update the new mobile view header, click the header in mobile view. An automatic backup is created when you update the header.