# Changing the header

Creating custom headers is often an important part of branding an application flow. This template came 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 example company, “AirCo”.

### Uploading an image

First, we will start by uploading a new logo.

1. In the **Web Flows** Builder, go to **Page Layout > Standard Layout**.
2. Both the \_Mobile \_ or the \_Desktop \_ Layout are available for selection. Select _Mobile_ and then select the Image Web Control under _Page container_ > _Header container_ .

<figure><img src="https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-628227ab11c07ef66ef6a9a1dba5c4be2ffa2fe5%2Fchanging-the-header-v184-0.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

3. In the Inspector:
   1. Go to **Properties** > **General**.
   2. Under **Image src**, use the dropdown menu to select the **Upload** tab and use this to upload your company logo.

<figure><img src="https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-69e264ce5dcba288ae32c0df810b4f1a08bb098f%2Fchanging-the-header-v184-1.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

### Defining Page Layout

We used the Tree of Page Layouts to define what image will be used in our Layouts. However, Page Layouts allow you to not only define an image but the header that will appear in both the Mobile and Desktop Layouts. We will use the Page Layout to further customize the Header of our pages using the logo we uploaded and other configurations.

<details>

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

**Desktop Layout**

Desktop 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 the Main Content displays, but will not affect any other aspects of the whole Web Page Layout, which is applied to the application universally. This Layout applies when the device selected in Studio is Full (Full Web Page).

**Mobile Layout**

The **Mobile Layout** defines the layout of Web Pages on mobile devices. As the Desktop layout, it also has a the **Main Content** Container. By default, this is defined for screens with less than or equal to 800 pixels wide, although this is customizable.

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

</details>

Since Mobile and Desktop are two separate Layouts, we will need to configure both of them independently.

#### Configuring 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://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-823f4f315ce4582414ab1d51df5b35dcd9a04671%2Fchanging-the-header-v184-2.png?alt=media)

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

<figure><img src="https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-e2c7cd7473490fb1841cd0af4b35e919054bc761%2Fchanging-the-header-v184-3.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

3. Click on the ‘+’ icon next to the Header Container to add an **Image** Control from Media. We will select the second option of the Image Control to have a smaller image in our Web Page. Nevertheless, this size can be changed at any time.

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

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

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

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

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

6. With the Label Control selected, go to the **Properties** tab of the Inspector and, in **General > Text**, use the text field to edit the text directly or the dropdown arrow to edit the label as an [Airscript](../../working-with-data/working-with-data-overview/airscript-quick-start). Add the company name “AirCo” as a text.

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

#### Configuring Desktop Layout

We are going to repeat the same process as we did with the Mobile Layout.

1. Go to **Desktop** and check the dimensions in the Inspector. By default, the browser width is defined in 800px and this value can be change at any time.

> 📘 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 for Mobile and Desktop layouts as mutually exclusive.

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-303d4c0ff6f9559ba93e8e80099c2619d8ea8667%2Fchanging-the-header-v184-8.png?alt=media)

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

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

3. Click on the ‘+’ icon next to the Header Container to add an **Image** Control from Media, as we did in the **Mobile Layout**.

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

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

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-d0bbf0c1c99f07480ceceaaefc9cc876d1ac05bb%2Fchanging-the-header-v184-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://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-ec3f707277f3059c8d87d2832bfa979bba477d74%2Fchanging-the-header-v184-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 example company’s name “AirCo”.

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

#### Styling the header

We can arrange the header in multiple ways. For the purpose of this exercise, we will arrange the elements in the Web Page in a specific manner, but there are several other ways that would rely on how creative you are or the way you need these elements to be displayed. Let’s make some adjustments, so the logo and the company name are organized in a horizontal way.

> 📘 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 be distributed side by side.
2.  Align the Header Container so that it looks well centered.

    ![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-006b0eacf56f7a5d1fb1fb0321d9133cda282b16%2Fchanging-the-header-v184-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://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-6100bd92d707fc07af0137be309f339ff3b74633%2Fchanging-the-header-v184-15.png?alt=media)

4. Further adjustments can be made if we want, for example, the logo size can be smaller:\
   a. With the Image Control selected, go to the **Style** tab of the Inspector\
   b. Go to **Override Styles > Dimensions**.\
   c. Change both the width and height as needed using the **Expression** editor. We will set the image's height as `60px`.

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-fcbb6483807700b23a40ca775122af6b38fea9a3%2Fchanging-the-header-v184-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 **Style** 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://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-0a0896b37995e80652b6d89a40900864db07e0d0%2Fchanging-the-header-v184-17.png?alt=media)
6. Go to **App Preview** to see the changes reflected in the app:

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

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