How to set up your header

The header

The header is the bar at the top of your app. It stays on screen everywhere: it shows your app's identity, gives each section its title, holds shortcuts, and helps users find their way.

You set it up in the My App menu.

In your app's structure, click Header.

Header height

First, choose the height of the header: small, medium or large.

Choose Medium… and the header gets taller, with the same title or logo.

Choose Large… and you can add a short description. Type it here… and click OK.

It shows under your title, in the large header.

Medium and large apply to the sections of your main navigation; other pages always use the small header. This app keeps the small one.

Title or logo

In the Logo block, your app's name appears as text, or as an image. To change the text, type your title… and click OK.

The preview updates right away.

To change its color, click the color, enter a color code or pick one, then click Choose.

The title takes the new color.

Pick a font in the list… and the preview shows it.

Use the slider to set its size.

The title grows.

To show your logo instead, click Logo, and choose an image, at least 800 by 200 pixels.

Your logo takes the place of the text.

Place it on the left, or keep it centered.

Here, it moves to the left.

Then choose what the header shows as users browse: always your logo, with Logo only, as on this section page… or the name of each section, with Section title.

Navigation buttons

On the left of the header are the navigation buttons: the Back button, here in the preview, and the Menu button if your navigation uses one. You set their icon and their color here.

For example, a new color for the Back button… shows up right away.

Background

For the background, choose a color, and the color of the bottom edge.

The header takes the new background color.

With the small header, you can also use a background image, 1242 by 192 pixels.

The image now fills the header.

To remove it, click the trash icon on the image… and confirm.

The header shows its background color again.

Scroll effect

The scroll effect sets what the header does when users scroll down: it stays, or it hides. With a medium or large header, it can also shrink.

With Hiding, the header slides away as the page scrolls.

Actions in the header

On the right, actions are shortcuts to the pages you choose. To add one, click Add an action… then choose its destination, here the Search section.

The new shortcut appears in the header, with a default icon.

To change it, click the icon… search the icon library, and choose the magnifying glass.

The shortcut now shows a magnifying glass. You can also set its color; on tablet and desktop, it can show a title, and on desktop, appear as a button.

The header shows two shortcuts; the others go into an extra menu.

A header per section

Each section can also have its own header. Go back to the structure… and click a section.

Open Header… and choose Modify the header of this section.

Its settings work like the general header. Here, a different background color… only for this section.

To return to the general header, click the gear… then Go back to default header, and confirm.

The section uses the general header again.

Publish

To make your changes visible to your users, publish your app's update from the Publish menu.