# Header

Settings of this group allow you to manage the overall look and behavior of the header elements.

### 1. General

Here you can configure a default header style for "**All Pages**" on your site.

<figure><img src="https://532169580-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mboj_b4Ha8PjhcwkI9w%2Fuploads%2FZAbC3sJKZE0msI0JcYPH%2Fimage.png?alt=media&#x26;token=a33afbcb-6e02-4691-b64c-9dad9951f579" alt=""><figcaption></figcaption></figure>

#### 1.1 Header Style

Here you can select a header style from the list of Custom Headers Layouts.

<figure><img src="https://532169580-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mboj_b4Ha8PjhcwkI9w%2Fuploads%2FlpxncWxzktHWMQ9Seg1h%2Fimage.png?alt=media&#x26;token=fee3884f-0adc-4b70-8068-75e419cef8d8" alt=""><figcaption></figcaption></figure>

Available Custom Header Layouts:

**Header Style 01**&#x20;

The default header style has the logo and main menu on the left and language, phone number, book now button on the right.

![Header Style 01](https://532169580-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mboj_b4Ha8PjhcwkI9w%2F-McX4Ugbk1c4udr6QQuX%2F-McXFsGCA96-puaE5UcK%2FScreen%20Shot%202021-06-19%20at%2010.03.54%20AM.png?alt=media\&token=e8040df0-9f6e-45f4-ac44-b3b792230d78)

#### Header Style 02

Header style two has the logo and canvas menu on the left, book now button on the right.

![Header Style 02](https://532169580-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mboj_b4Ha8PjhcwkI9w%2F-McX4Ugbk1c4udr6QQuX%2F-McXDUL60OcGWW_3bQ9n%2FScreen%20Shot%202021-06-19%20at%2010.01.30%20AM.png?alt=media\&token=f9bbabf3-501e-4c63-8eeb-2e2a6eeddc73)

**Header Style 03**

Header style three has the logo and canvas menu on the left, book now button and language on the right.

![Header Style 03](https://532169580-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mboj_b4Ha8PjhcwkI9w%2F-McX4Ugbk1c4udr6QQuX%2F-McXDgJfyc2g5DDKtK9l%2FScreen%20Shot%202021-06-19%20at%2010.03.27%20AM.png?alt=media\&token=60fa1a09-4ee0-4bd7-b148-ace5c25d5902)

**Header Style 04**

Header style four has the logo centered and the canvas menu, language on the left, book now button on the right.

![Header Style 04](https://532169580-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mboj_b4Ha8PjhcwkI9w%2F-McX4Ugbk1c4udr6QQuX%2F-McXDvX_bE7RE6up1qJ2%2FScreen%20Shot%202021-06-19%20at%2010.02.39%20AM.png?alt=media\&token=b0d7141a-b453-4390-90e0-4df6a14cbe92)

**Header Style 05**

Header style five has the logo centered and the main menu, book now button on the right.

![Header Style 05](https://532169580-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mboj_b4Ha8PjhcwkI9w%2F-McX4Ugbk1c4udr6QQuX%2F-McXE9wj0b-fzizfk-Oz%2FScreen%20Shot%202021-06-19%20at%2010.03.06%20AM.png?alt=media\&token=9b55ceb9-98e2-43af-843a-14c296668738)

#### Header Custom

A custom header is a header that you design and customize yourself

<figure><img src="https://532169580-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mboj_b4Ha8PjhcwkI9w%2Fuploads%2FpOZIF07S0kgp6v5EgS7e%2Fimage.png?alt=media&#x26;token=fb243ab7-dce0-4cc4-b7ce-f28e19898203" alt=""><figcaption></figcaption></figure>

#### 1.2 Header Float

To "**Sticky Menu**" behavior when scroll up, set "**Header Overlay: Yes**"

<figure><img src="https://532169580-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mboj_b4Ha8PjhcwkI9w%2Fuploads%2F0jk3B9shMOV1lAfep79a%2Fimage.png?alt=media&#x26;token=be2df6b7-123e-4026-b444-b44e4f00a170" alt=""><figcaption></figcaption></figure>

![Sticky Header when scroll up](https://532169580-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mboj_b4Ha8PjhcwkI9w%2F-McX4Ugbk1c4udr6QQuX%2F-McXHx6EowwsK4CU1O-M%2F9623319-166d69fd84d0d8cdff9a6be7d169c850.png?alt=media\&token=2f092617-106b-4790-9ca0-18b0983e380a)

#### 1.3 Overlay (Transparent) Header

The “Overlay Header” (also referred to as “Transparent Header) in NUSS allows you to position whatever is at the top of your page under the main header (which will be transparent) so you can create some cool unique layouts. This function can be enabled globally or on a per-post/page basis.

<figure><img src="https://532169580-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mboj_b4Ha8PjhcwkI9w%2Fuploads%2FencI3O9lHcKNcEAn0Muh%2Fimage.png?alt=media&#x26;token=f6ed34f4-1992-444d-abf9-1c1e830fa7c7" alt=""><figcaption></figcaption></figure>

#### 1.5. Customize Header Style and Topbar

To **Custom Header Style,** our theme support option to set it in Customize -> Header

Here, there are 3 options for customizing the header: Header Top; Header Main, and Header Bottom.

{% hint style="info" %}
**Note: These 3 options only work when you create a new header called My Custom in General -> Header type -> Custom**
{% endhint %}

<figure><img src="https://532169580-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mboj_b4Ha8PjhcwkI9w%2Fuploads%2FBzhl1TYwOABp9oirCrG6%2Fimage.png?alt=media&#x26;token=d6ec58b5-4fba-411f-bd35-36f9ba3cbaa8" alt=""><figcaption></figcaption></figure>

**Header Top:**

If you want to use the top bar to enter featured ad message content, you can enable it in the header top option -> Enable top bar

<figure><img src="https://532169580-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mboj_b4Ha8PjhcwkI9w%2Fuploads%2FiwbijnjyAgZVK1jOW8ON%2Fimage.png?alt=media&#x26;token=719e4781-438a-496e-ab7f-e857be052d70" alt=""><figcaption></figcaption></figure>

And here, you can customize the distance, color,... for it

**Header Main**

In this option, you can customize whatever you want on your header, you can customize the position of the logo, menu. Or you can customize the distance, image, and color,... for it

<figure><img src="https://532169580-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mboj_b4Ha8PjhcwkI9w%2Fuploads%2F9VoQs8aeE4AT7tDxdA2F%2Fimage.png?alt=media&#x26;token=2383e9fd-6d81-43ca-8c15-d885b3ff5ea8" alt=""><figcaption></figcaption></figure>

**Header bottom**

As a header main, you can customize whatever you want on your header, you can customize the position of the logo,.. Or you can customize the distance, image, and color,... for it

<figure><img src="https://532169580-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mboj_b4Ha8PjhcwkI9w%2Fuploads%2FL9pl4RWyELqQ7WqAcEtc%2Fimage.png?alt=media&#x26;token=818462ad-a9d0-4772-95db-af5c2da02ae7" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Note:** If you use the default header of the theme or want to use the header that you have customized, go to **Edit Page** -> **Page Option** -> **Header** -> **Header Type** And select the header you want. If it's the header that you custom, choose **Custom**
{% endhint %}

<figure><img src="https://532169580-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mboj_b4Ha8PjhcwkI9w%2Fuploads%2FLfHuzkgtCgI0Typcw8zy%2Fimage.png?alt=media&#x26;token=0ebbe5f8-03c3-427f-856e-457792d5a7b4" alt=""><figcaption></figcaption></figure>

You can watch a video tutorial on creating a header here:

{% embed url="<https://www.youtube.com/watch?v=Rf8HJU_9bPo>" %}