# Header layout

#### How to Select a Header Layout

{% hint style="success" %}
To set up your header layout, follow these steps:

1. Navigate to Navigate to **Appearance > Customize > Site Header > Header Styles**
2. Under **Header Style**, choose your preferred layout from the list
   {% endhint %}

Each layout offers different design elements and customization options.

The **header** is one of the first visual elements users see on your site and plays a crucial role in the overall appearance and navigation experience. It typically includes the logo, menu, and other top-level elements. This section covers how to customize and configure your header in the theme.

**Header Styles :** 11 predefined Header Styles

<figure><img src="/files/e5CD62POIoHbuuksmJYL" alt=""><figcaption></figcaption></figure>

**Site Header Configuration:**

* **Sticky Navigation:** **Enabled** / **Disabled** (The header remains visible at the top of the page while scrolling).
* **Header Position:** **Above Slider** (The header appears at the top, above the main slider section).
* **Header Transparency:** **Semi-Transparent** (The header has a slight transparency effect for a sleek look).
* **Enable Dark Background:** **Yes / No** (A light background is used for better visibility).
* **Search Icon:** **Enabled** / **Disabled** (Search functionality is hidden for a cleaner design).
* **Cart Icon:** **Enabled** / **Disabled** (No cart icon, ideal for non-eCommerce sites).
* **Show Top Bar : Enabled** / **Disabled** (The top bar is displayed above the main header).
* **Show Top Bar : Enabled** / **Disabled** (The top bar is displayed above the main header).

**Content Layout:**

```
<div class="column dt-sc-one-half first">
  <p>If you can envision it, then we can build it!</p>
</div>
<div class="column dt-sc-one-half alignright">
  [dt_sc_url class="fa fa-map-marker" link="url:%23|title:123, New Melbourne, 2308201"]
  [dt_sc_sociable socials="facebook,google-plus,twitter"]
</div>
```

#### **Site Header > Header Background** <a href="#site-header-greater-than-header-background" id="site-header-greater-than-header-background"></a>

The **Header Background** allows you to control the appearance of your site’s header area, including background color and image settings.

<figure><img src="/files/FB8HHNJ2R6fsjL16x0IY" alt=""><figcaption></figcaption></figure>

***

**Header Background Configuration:**

**Customize Background: Enabled**

* This option is set to **"Yes"**, allowing you to customize the header background.

***

**Background Color:**

* You can choose any color for your header background using the color picker.
* **Recommended Setting:** A light or dark color with good contrast against text and icons.

***

**Background Image:**

* **Add Background Image for Breadcrumb:** Disabled (No image selected).
* **Current Setting:** No background image is applied.
* This means the header background relies purely on the selected background color.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wdt-kirki.gitbook.io/wdt-kirki/header/header-layout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.