# Changing the header

In order to personalize the app, we’ll change the template’s header. This template comes out of the box with a single Image for a header, which we're going to change for a different Image and Label, corresponding to our company “AirCo”.

1. Go to **Media** Builder and click on **Upload** at the top right corner of the Studio.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-4c4609270a7f43cdbd303204e7370f1c6e07b7a7%2Fchanging-the-header-v181-0.png?alt=media)

2. Drag and drop the desired company logo. It will show up below the default one:

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-b415b8ebeb801898c8f9d97074958e98a67e6807%2Fchanging-the-header-v181-1.png?alt=media)

### Defining Layouts

In **Web Flows** Builder, go to **Page Layout > Standard Layouts**. Here we’ll define how the header will appear in both the Mobile and Desktop Layouts.

<details>

<summary>What are Mobile and Desktop Layouts?</summary>

**Page Layouts**

Page Layouts consist of nested [Containers](../../web-controls/container-web-control), including a special one designated **Main Content**. This is the Container that holds the contents of the Web Page. Navigating to a new Web Page changes what Main Content is displayed, but will otherwise not change any aspect of the Page Layout, which is applied to the application universally.

The **Mobile Layout** defines the layout of Web Pages opened on mobile devices. By default, this is defined by screens less than or equal to 800 pixels wide, although this is customizable. The **Desktop Layout** defines the layout of Web Pages opened in browser windows. By default, this is defined by screens more 800 pixels wide, although this is customizable.

For more information on Page Layouts, see [Page Layouts](../../styling/page-layout).

</details>

#### Mobile Layout

1. Go to **Mobile** and check the dimensions in the Inspector. By default, the browser width is defined in 800px, but this can be customized depending on our use case.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-ff8964386d436f0c35ca6eaede371d27f828558c%2Fchanging-the-header-v181-2.png?alt=media)

2. Go to **Page Container > Header Container** and delete the default image.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-e2c7cd7473490fb1841cd0af4b35e919054bc761%2Fchanging-the-header-v181-3.png?alt=media)

3. Click on the ‘+’ icon next to the Header Container to add an **Image** Control from Media.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-d0809d6a3668fb51440b33723c2458859138f7e5%2Fchanging-the-header-v181-4.png?alt=media)

4. Add a **Label** to the same Container.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-a3c8cfcb0001ec7a5f00193b067ad83bf669fcff%2Fchanging-the-header-v181-5.png?alt=media)

5. With the Image Control selected, go to the **General** tab of the Inspector and, in **Control Properties > URL**, you’ll find the newly uploaded image listed in **Assets** for you to select.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-99646936a05ebe67746c270f0023047a5d120f8f%2Fchanging-the-header-v181-6.png?alt=media)

6. With the Label Control selected, go to the **General** tab of the Inspector and, in **Control Properties > Text**, add the company name “AirCo”.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-ca616c5ec5479d55f7fbc98dfe4c72727cfcd8ef%2Fchanging-the-header-v181-7.png?alt=media)

#### 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 so that it better fits a desktop screen.

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

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-7c489fc3cc5adde10cba42dbb1d89a316db9da55%2Fchanging-the-header-v181-8.png?alt=media)

2. Go to **Page Container > Header Container** and delete the default image.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-5f7c58612f3d58b2eeb8d614640e4acf262da27d%2Fchanging-the-header-v181-9.png?alt=media)

3. Click on the ‘+’ icon next to the Header Container to add an **Image** Control from Media.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-8af51111a69358bf1e8e8204df74970dffc78f79%2Fchanging-the-header-v181-10.png?alt=media)

4. Add a **Label** to the same Container.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-d0bbf0c1c99f07480ceceaaefc9cc876d1ac05bb%2Fchanging-the-header-v181-11.png?alt=media)

5. With the Image Control selected, go to the **General** tab of the Inspector and, in **Control Properties > URL**, select the image of the logo from **Assets**.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-f2f043ec25e41b8f7f8d2a8c763d668029525d4b%2Fchanging-the-header-v181-12.png?alt=media)

6. With the Label Control selected, go to the **General** tab of the Inspector and, in **Control Properties > Text**, add our fake company’s name “AirCo”.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-bb809b3546679b082441d02167fdfe168dce55b5%2Fchanging-the-header-v181-13.png?alt=media)

#### Styling the header

Let’s make some adjustments so that the logo and the company name are better distributed in the header.

> 📘 Make sure you make the following changes to the Header Containers both in the Mobile Layout and the Desktop Layout, as changes made to one will not be applied to the other. You might also find that you want to style one slightly differently from the other, as styling conventions that look good on small mobile screens might not look as good on larger desktop screens.

1. With the Header Container selected, go to **Distribute Children** and select **Stack Horizontal**. This way, both elements will sit side by side.
2. Align the Header Container so that it looks well centered.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-619b7bad56b05259f7f14b7504f23798aeec8995%2Fchanging-the-header-v181-14.png?alt=media)

3. You can also change the spacing to your linking by selecting one of the options from the dropdown or providing a customized one in **Expression**. In this case, we are using Half & Whole to distribute the Controls evenly.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-eb6ed9b5ae60741b6dd25a50cb4f61f6a2744ecf%2Fchanging-the-header-v181-15.png?alt=media)

4. Further adjustments can be made if we want, for example, the logo to be smaller:\
   a. With the Image Control selected, go to **Override Styles > Dimensions**.\
   b. In the **General** tab of the Inspector and change both the width and height as needed using the **Expression** editor:

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-83e286a86d82386af71cd51aa11179cb5335b2f2%2Fchanging-the-header-v181-16.png?alt=media)

5. A separator from the header to the rest of the app can also be created by adding a border to the Header container:\
   a. Select the Header container and go to the **General** tab of the Inspector.\
   b. Go to **Override Style > Border** and select a solid bottom line border.\
   c. Choose the textPrimary color and 1px for the border size.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-765865f215448a3017c9ef690888f6df1ebb90b9%2Fchanging-the-header-v181-17.png?alt=media)

6. Go to **App Preview** to see the changes reflected in the app:

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-c9d5b38871ec8114cd333a77474562f47bc67379%2Fchanging-the-header-v181-18.png?alt=media)
