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

\[block:embed] { "html": "\<iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FlGXG4SjKe1A%3Ffeature%3Doembed\&display\_name=YouTube\&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DlGXG4SjKe1A\&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FlGXG4SjKe1A%2Fhqdefault.jpg\&key=7788cb384c9f4d5dbbdbeffd9fe4b92f\&type=text%2Fhtml\&schema=youtube" width="854" height="480" scrolling="no" title="YouTube embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true">", "url": "https://www.youtube.com/watch?v=lGXG4SjKe1A", "title": "Adding headers to applications", "favicon": "http://www.google.com/favicon.ico", "image": "https://i.ytimg.com/vi/lGXG4SjKe1A/hqdefault.jpg", "provider": "https://www.youtube.com/", "href": "https://www.youtube.com/watch?v=lGXG4SjKe1A", "typeOfEmbed": "youtube" } \[/block]

## 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://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-a7b94ad85ac3dbb915c06be8d42f9f356a534f4d%2Fcreating-an-app-header-v181-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://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-b1cc4c38fb06a79fe3cef5897a7f84a0abb4a9ba%2Fcreating-an-app-header-v181-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://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-eb207d3ba0d1a4b01bc4b847d6036b62e040c20f%2Fcreating-an-app-header-v181-2.png?alt=media)

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

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-d408d9075ed3db142383fc155fddeaef42990545%2Fcreating-an-app-header-v181-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://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-a891d6a64ef84de46bd8274ee544e770371d10fe%2Fcreating-an-app-header-v181-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://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-1b4f98dd8ad892700bfe9e1dc62fd54831bbe6bf%2Fcreating-an-app-header-v181-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://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-25760553e0c05e08ac4a2f7bcbaf2f35299a3010%2Fcreating-an-app-header-v181-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://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-2defd9731e2340a355f326f967569b7b281ffba9%2Fcreating-an-app-header-v181-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://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-d3a1c09749724d6e83601e148b33549ed80fa15b%2Fcreating-an-app-header-v181-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://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-ed69efc02f5a6b390e6f997dacf964edc606e1c3%2Fcreating-an-app-header-v181-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://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-1b4f98dd8ad892700bfe9e1dc62fd54831bbe6bf%2Fcreating-an-app-header-v181-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://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-25760553e0c05e08ac4a2f7bcbaf2f35299a3010%2Fcreating-an-app-header-v181-6.png?alt=media)

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