Mobile - Header and expandable menu

Overview

The expandable menu layout for mobile offers more customizations 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.

Guide

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.

Mobile Header

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 color as well as the background of the header.

Mobile Navigation

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.

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 and can't see it on the mobile header

Once adding multi language to the site we will automatically add it to the expandable menu. 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 automatically create a backup for the site in the site settings.