Mobile - Header and expandable menu


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 layout that includes 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.


Mobile Header

To edit the mobile header, hover over the header and click the Header label. Then select Edit Design.

The mobile header offers 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. 

Recent 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.

Was this article helpful?
0 out of 1 found this helpful



Please sign in to leave a comment.


Please Log in as a Pro

Priority Phone Support is available exclusively to Pros. Log in to your Pro account now to see our international support numbers.

Log In
Not a Pro? Purchase a Pro plan!