The expandable menu layout for mobile offers more customisations and a way to display widgets on the header and menu that will always be visible even if the user scrolls down the site.
You can change the layout of the header to a predefined layouts that include any call to action you want like buttons, click to call, store cart, social icons and more. You can add any widget to the expandable menu - just drag & drop from the widgets panel.
You can update to the new mobile view header by clicking on 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.
To edit the mobile header, hover over the header and click the Header label. Then select Edit Design.
The mobile header offers multiple layouts that display widgets such as social links, phone numbers and more. Please note that 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 on your site, more layout options will be 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 will not appear.
Other mobile header design aspects include changing the menu icon position and colour as well as the background of the header.
To edit the expandable menu, open the menu in mobile view (AKA hamburger icon). The menu editor will be open automatically for you to edit.
The expandable menu offers multiple layouts that can display the social links, contact information and more. You can add any widget you want 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 will delete all content that you added into the menu, taking only the widgets in the chosen layout.
You can change the entrance effect so that the menu appears from the top or the side. When changing this setting, it will also let you change the width (when choosing the side entrance effect) or height (when choosing the top entrance effect).
Another option is to push the site or to display the menu on top of the site.
Things to consider
The last row in my navigation is always at the bottom, can I change this?
The last row in the menu acts as a footer in this section and will always appear at the bottom, no matter the size of the phone screen. If you remove the content of the row you won't see it.
I added multi-language but can't see it on the mobile header
Once adding multi-language to the site we will add it to the expandable menu automatically. To add it to the header you will need to select a new header layout that includes multi-language.
Which site layouts have these capabilities?
The expandable menu is relevant for 2 of the 5 mobile layouts. once you switch to any site layout we will create a backup for the site automatically in the site settings.