How to set up your header

Hello and welcome to your GoodBarber back office!

Today we will set the header or Logo and Title of your application.

This is the top part of the application that is always visible and accessible on all sections.

The header has 4 purposes: 

- Display the identity of your app

- Give a title to a section

- Display shortcuts

- Navigate in the application

Let's go right away to the My app > Design > General Design menu. 

I click on Logo and Title.

Here I can either enter the name of my app in text format or add a logo. 

I want something very "branded" so I will add a logo instead.

It is already ready, I just have to upload it.

That's it!

Now I choose the alignment of the logo on the right, or centered. 

Easy, isn't it?

You want more? I knew it! 

You can go further in customizing the header by activating the Advanced menu here.

There, I have a lot more options now.

I can change the background color, the separation bar, add background images.

I can also add links to my header.

I'm working on the Freyja spa app, it's a local business.

So I'm going to add a link to the membership card here. I click on Add Action, choose the icon, set the colors for my shortcut. Perfect. 

For the PWA version, you can choose to display the title of the shortcut on tablet and desktop. 

I also add a link to the loyalty card so that my users can easily access their rewards.

Last parameter, the other elements of the header.

Here it is the back icons that will be displayed in the header while the user is browsing the app.

I put the video on the navigation modes in the info bar ;)

I preview.

It's done ! 

I’ll show you the final result.

Now you know how to customize the Header of your app. 

See you soon for a new tutorial!