> ## Documentation Index
> Fetch the complete documentation index at: https://help.kajabi.com/llms.txt
> Use this file to discover all available pages before exploring further.

<AgentInstructions>

## Submitting Feedback

If you encounter incorrect, outdated, or confusing documentation on this page, submit feedback:

POST https://help.kajabi.com/feedback

```json
{
  "path": "/articles/website/pages/customizing-your-header",
  "feedback": "Description of the issue"
}
```

Only submit feedback when you have something specific and actionable to report.

</AgentInstructions>

# Customize the header

> The header is a critical element of your website that runs across the top of every web page, typically containing your logo and site navigation.

The Header is a critical element of your website that runs across the top of every web page. Typically, it contains your logo and site navigation. The Header is a great place to showcase your brand colors and logos, and display announcements you want your visitors to see.

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/p5ukvvjevf" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

<Note>
  **Note:** If you are using the Premier Legacy Templates, please refer to the guide [here](/articles/website/pages/how-to-customize-your-header-in-your-page-with-premier).
</Note>

***

## Accessing the header editor

* Open the **Website** tab from the Dashboard.
* Select the **Pages** tab.
* Open the page editor for your Page. [Learn more](/articles/website/pages/how-to-get-to-the-page-editor)
* Navigate to the sidebar panel and click **Header**:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/zcubs97uv0" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

***

## Customizing your header

Optimize the topmost section of your page, the Header, by designing a Header that best fits your brand and business.

Design your Header by customizing the overall appearance, functionality, and behavior.

<Note>
  **Note:** Your Header will populate across your website pages. [Learn the difference between pages on Kajabi.](/articles/website/pages/pages-overview)
</Note>

### Header text and background colors

Start customizing your Header by adding your branding colors to the Header Text Color and Header Background Color.

**Looking to create a simple, standout design with colors to match your brand?**

By default, Kajabi helps you design a smart page by adjusting the text color based on the brightness of your selected background color.

If you choose a dark background color, the text color will change to stand out against the dark background.

If you select a light color, the text color will take on a darker tone to contrast against the light background:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/41flmc12t9" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

**Want to determine your own branded text and background colors?**

Select your desired colors for both your Header Text Color and Header Background Color to override the dynamically adjusting text colors.

### Header position

After setting your general header text and background colors, customize the behavior, position, sticky text, and background colors.

* **Normal** is the default setting for your Header. This keeps your Header in line with your page and disappears as your visitor scrolls down the page.
* **Overlay** adjusts the Header to overlay the first Section of your page:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/fppr9gqbtq" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

* **Enable Sticky Header** or **Fixed on scroll** keeps the Header fixed and visible as your visitor scrolls down your Page:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/hj804s2no7" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

If you choose to enable **Fixed on scroll**, customize the text and background colors for your header when a visitor scrolls through the page:

* **Sticky Text Color** - Header text color for when the page is scrolled.
* **Sticky Background Color** - Header background color for when the page is scrolled.

<Note>
  **Note:** If you are customizing your header in a landing page (and not the website builder) these settings will be found in the [Desktop Layout of your Section Settings](#desktop-layout).
</Note>

***

## How to add header blocks

Design a Header unique to you by adding blocks:

* Open the **Website** tab from the Dashboard.
* Select the **Pages** tab.
* Open the page editor for your Page. [Learn more](/articles/website/pages/how-to-get-to-the-page-editor)
* Navigate to the sidebar panel and click **Header**.
* Click **Add Content**.
* Select your desired [Block Type](#header-block-types):

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/o6whznnq4p" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

***

## Header block types

Design your header by adding and rearranging your chosen header block types:

### Announcement or Hello Bar

Communicate an important announcement or notification for your page visitors as a banner above your Header. [Learn more](/articles/website/pages/how-to-add-a-hello-bar-to-your-page)

### Call to Action

Encourage your page visitors to take immediate action on your message by using a Call to Action (CTA) block on your Header. [Learn more](/articles/website/pages/how-to-use-a-call-to-action)

### Dropdown Menu

Create a fluid navigation experience for your page visitors by adding a dropdown menu to your Header. [Learn more](/articles/website/pages/add-a-dropdown-menu-to-your-header)

### Logo

Brand your page with your logo at the forefront of your page. [Learn more](/articles/website/pages/how-to-add-a-logo-to-your-page-header)

### Menu

Include a simple navigation menu in your Header to encourage your page visitors to easily explore your site. [Learn more](/articles/website/pages/how-to-add-a-menu-to-your-page-header)

### User Menu

Provide a space for your customers to access their User Account by adding a User Menu to your Page Header. [Learn more](/articles/website/pages/how-to-add-a-user-menu-to-your-page-header)

Want to learn more about Blocks? [Click here to learn how to add blocks to your page.](/articles/website/pages/add-blocks-to-your-page)

***

## Header section settings

### Desktop layout

Choose to display or hide your Header and the horizontal alignment of your Header when viewed on desktop devices:

<img src="https://mintcdn.com/kajabi-support/3C7Vui-NnfT9lLL-/articles/images/d068fd8c_16924247972763.png?fit=max&auto=format&n=3C7Vui-NnfT9lLL-&q=85&s=475acbfefe47791cc99f4a11774ccef5" alt="Header Desktop Layout" width="1651" height="940" data-path="articles/images/d068fd8c_16924247972763.png" />

### Mobile layout

Choose to display or hide your Header, configure the Hamburger Menu Icon Color, and customize the Hamburger Icon Color when [Sticky Header is enabled](#header-position):

<img src="https://mintcdn.com/kajabi-support/fIOZvo-6lVf3a0o9/articles/images/ff959849_16924315123739.png?fit=max&auto=format&n=fIOZvo-6lVf3a0o9&q=85&s=0bf8d282ea81ef79c81b43f8517216df" alt="Header Mobile Layout" width="1657" height="942" data-path="articles/images/ff959849_16924315123739.png" />

#### What is a hamburger menu?

The hamburger menu is the three horizontal lines to communicate to your mobile visitors that there is a dropdown menu:

<img src="https://mintcdn.com/kajabi-support/N_ou1KPM051i95tz/articles/images/b5deeb58_16924371139355.png?fit=max&auto=format&n=N_ou1KPM051i95tz&q=85&s=ae25ef3f31584b17b2394ef34053ea7b" alt="Hamburger Menu" width="1657" height="942" data-path="articles/images/b5deeb58_16924371139355.png" />

### Typography

Adjust the Font Size for your Header Text on both Desktop and Mobile Devices:

<img src="https://mintcdn.com/kajabi-support/DB7yAogdPbid1BoD/articles/images/2c595622_upload_2371708420774475082.png?fit=max&auto=format&n=DB7yAogdPbid1BoD&q=85&s=2fcfedcd18aa2d6213ccd5c45f5a62de" alt="Header Typography" width="3136" height="1792" data-path="articles/images/2c595622_upload_2371708420774475082.png" />