Desktop and Tablet - Header and expandable menu

Overview

You can have an expandable menu on your desktop and tablet websites, 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 headers are fully customizable too, so you can add and emphasize anything you like there.

Guide

Choosing the Expandable Menu Layout

To choose the expandable menu layout for your site, go to the Design tab on the left menu and click Site Layout. In the desktop view, choose the bottom layout; in the tablet view, choose the right layout.

Desktop & Tablet Header

After selecting the expandable menu layout, you’ll see a hamburger icon in your site header, which reveals the expandable menu on click.

To edit the header, hover and click the Header label, then select Edit Design. From this editor, you can change the position of the menu icon and customize the background, spacing, etc.

Desktop & Tablet Expandable Menu

To edit the expandable menu, click the hamburger menu icon to open the Menu Design Editor. From here, choose from several menu layouts, control where the menu will enter from (top / side), what entrance effect it has (cover / push), and more.

The expandable menu can have up to 3 rows, and each one is fully customized. The width of the menu is defined in percentages to fit all screen sizes.

Note: If the desktop and tablet view have the same site layout (both expandable or both top bar), customizations will be the same for both views. If the site layouts are different, each device view must be defined separately.

Considerations

What if I have different header layouts for desktop and tablet views?

If you have different header layouts for each view (for example, a top bar header on desktop and an expandable menu on tablet), the editing you do on each header will be independent. If both desktop and tablet use the same header layout, edits to one header will be applied to the other header.

I don’t have the header features mentioned in this article. Where do I find them?

If you don’t see the header features mentioned above, you may be using the old header. To update to the new header, click on 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.