# Creating an App Header

## Overview

The app header sits at the top of your application and is viewable on each page. Adding a customized app header is a way to brand your entire experience.

## Uploading images for the App Header

Upload the images that you intend to display in your header by toggling over to [Media Library](../studio/builder-bar/media-library) and clicking on **Upload**.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-a7b94ad85ac3dbb915c06be8d42f9f356a534f4d%2Fcreating-an-app-header-v180-0.png?alt=media)

After dragging and dropping the images (or selecting them for upload directly from the files on your computer), you will see them listed in the Stage:

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-b1cc4c38fb06a79fe3cef5897a7f84a0abb4a9ba%2Fcreating-an-app-header-v180-1.png?alt=media)

## Creating the App Header

Toggle over to [Web Flows Builder](../studio/builder-bar/web-flows-builder). In the Tree, go to **Page Layouts > Standard Layout**. Here we’ll set the header for both the Mobile and Desktop Layouts:

### Mobile Layout

1. Go to **Mobile** and check the dimensions in the Inspector. By default, the browser width is defined in 800px but it can be changed.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-eb207d3ba0d1a4b01bc4b847d6036b62e040c20f%2Fcreating-an-app-header-v180-2.png?alt=media)

2. Click on the '+' icon next to the Container and add a new Container. Rename it to 'App Header'.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-d408d9075ed3db142383fc155fddeaef42990545%2Fcreating-an-app-header-v180-3.png?alt=media)

3. Drag and drop the App Header Container to be above **Main Content** in the Tree so that it sits above the content of each Web Page within your application.
4. Click on the '+' icon next to the App Header Container and select Image as a Media control. Then change the name to 'Header image'.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-a891d6a64ef84de46bd8274ee544e770371d10fe%2Fcreating-an-app-header-v180-4.png?alt=media)

5. In the Inspector section, go to **General > Control Properties** and use the split control to select the image you need from the Asset dropdown. This way, the image will show up in the Stage.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-1b4f98dd8ad892700bfe9e1dc62fd54831bbe6bf%2Fcreating-an-app-header-v180-5.png?alt=media)

6. Then go to **Style > Override Styles** and set the **Dimensions** to 50% width. This leaves space to add another image, a [Label](../web-controls/label-web-control), or even a [Button](../web-controls/button-web-control) that opens a [Modal](../actions/the-open-modal-action).

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-25760553e0c05e08ac4a2f7bcbaf2f35299a3010%2Fcreating-an-app-header-v180-6.png?alt=media)

The contents of the new App Header Container will now appear above every Web Page within your application when it is viewed from a Mobile format, as defined by the value given under **Mobile > Advanced Options > Use When**.

### Desktop Layout

1. Go to **Desktop** and check the dimensions in the Inspector. By default, the browser width is defined in 800px but it can be changed.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-2defd9731e2340a355f326f967569b7b281ffba9%2Fcreating-an-app-header-v180-7.png?alt=media)

> 📘 The Mobile Layout takes precedence over the Desktop layout. If the **Use When** value is `TRUE` for both the Mobile and Desktop layout, the Mobile layout will be the one used. To avoid confusion, define the **Use When** values the Mobile and Desktop layouts as mutually exclusive.

2. Click on the '+' icon next to the Container and add a new Container. Rename it to 'App Header'.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-d3a1c09749724d6e83601e148b33549ed80fa15b%2Fcreating-an-app-header-v180-8.png?alt=media)

3. Drag and drop the App Header Container to be above **Main Content** in the Tree so that it sits above the content of each Web Page within your application.
4. Click on the '+' icon next to the App Header Container and select Image as a Media control. Then change the name to 'Header image'.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-ed69efc02f5a6b390e6f997dacf964edc606e1c3%2Fcreating-an-app-header-v180-9.png?alt=media)

5. In the Inspector section, go to **General > Control Properties** and use the split control to select the image you need from the Asset dropdown. This way, the image will show up in the Stage.

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-1b4f98dd8ad892700bfe9e1dc62fd54831bbe6bf%2Fcreating-an-app-header-v180-5.png?alt=media)

6. Then go to **Style > Override Styles** and set the **Dimensions** to 50% width. This leaves space to add another image, a [Label](../web-controls/label-web-control), or even a [Button](../web-controls/button-web-control) that opens a [Modal](../actions/the-open-modal-action).

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-25760553e0c05e08ac4a2f7bcbaf2f35299a3010%2Fcreating-an-app-header-v180-6.png?alt=media)

The contents of the new App Header Container will now appear above every Web Page within your application.
