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.
To select an expandable menu layout for your site:
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:
To configure the expandable menu:
4. On the Spacing tab, change the padding.
The expandable menu can have up to 3 rows, and each one is fully customized.
Note
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.
Note
This step only applies to existing sites. It does not pertain to new sites.
To edit the mobile header:
To edit the expandable menu, open the menu in mobile view. The menu editor automatically opens for you to edit.
2. On the Style tab, you have the following options:
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.
Note
This step only applies for existing sites, it does not pertain to new sites.
back to Header and Footer