> For the complete documentation index, see [llms.txt](https://docs.kaliumtheme.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.kaliumtheme.com/general/header/custom-header/elements.md).

# Elements

Every element you can put in a header, and what each one does.

Elements are a key part of the Custom Header Builder, and you can include as many as you need.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-a6855c279103c9b9ef1e6090b96f0dc327f7fbc1%2FHeader%20Elements.jpg?alt=media" alt="" width="280"><figcaption><p>The list of elements supported in the custom header</p></figcaption></figure>

{% hint style="info" %}
Some elements need a plugin to be active before you can use them, and appear grayed out until it is. Those are noted against each element below.
{% endhint %}

***

### Row

Groups other elements together and controls how they're spread across the row. This is the element to reach for when you want a gap between two groups of items, or everything pushed to one side.

**Content Align**\
How the elements inside the row are distributed:

* **Left**: grouped to the left
* **Center**: grouped in the middle
* **Right**: grouped to the right
* **Space Between**: pushed apart to the outer edges, with the gap in the middle

{% hint style="info" %}
**Space Between** is how you get a logo on the left and a button on the right with everything spaced evenly in between, without setting any padding.
{% endhint %}

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fx3sLgB9UqJnHhO0QzPMx%2Fheader-elements.jpg?alt=media&amp;token=db215dd1-cfd3-420c-b4c0-ef6242060215" alt="" width="284"><figcaption></figcaption></figure>

***

### Menu

Adds a navigational menu to your header, allowing users to access different sections of your site.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-15918920d4d56b61789c683b7752ab584f8a65b9%2FHeader%20Element%20-%20Menu.jpg?alt=media" alt="" width="288"><figcaption></figcaption></figure>

**Menu**\
The navigation menu to show. To create and/or manage menus, go to Appearance -> Menus

**Submenu Arrow**\
Whether to show the arrow indicator for menu items with submenus.

**Mobile Menu Trigger**\
At the mobile menu breakpoint, the navigation hides and a toggle button appears to open the mobile menu.

**Trigger Position**\
Related to the above option (if enabled), this option sets the placement of the trigger button within the current column, allowing it to be positioned at either the beginning or the end.

**Menu Item Spacing**\
The spacing between top-level menu items.

***

### Menu Trigger

Creates a button or icon that toggles a menu type. The available options will depend on the selected menu type.​

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-c6dc7a575e82c1f510501b2a24519482af3c6b83%2FHeader%20Element%20-%20Menu%20Trigger.jpg?alt=media" alt="" width="286"><figcaption></figcaption></figure>

**Menu Type**\
Which panel the button opens: *Standard*, *Fullscreen*, *Off-Canvas Side* or *Off-Canvas Top*. Everything below depends on this choice.

**Menu**\
The navigation menu to show inside it.

{% tabs %}
{% tab title="Standard" %}
**Position**\
Will set the placement of navigation within the column.

**Animation**\
The toggle animation of root-level navigation links. It has fade, slide and scale animations available.

**Animate Direction**\
The staggering animation direction of root-level menu items.

**Submenu Arrow**\
Whether to show the arrow indicator for menu items with submenus.

**Menu Item Spacing**\
The spacing between top-level menu items.
{% endtab %}

{% tab title="Fullscreen" %}
**Content Align**\
The placement of the navigation menu determines its layout: the Left and Centered options display menu links as a vertical list, while the Horizontal option arranges menu items in a horizontal row.

**Search Field**\
Optionally, you can add a search bar as the last item in the menu, allowing users to search your site easily.
{% endtab %}

{% tab title="Off-Canvas Side" %}
**Widgets**\
Choose whether to display widgets within the menu container. The widgets displayed here are sourced from the **Off-Canvas Side** sidebar.

**Alignment**\
Adjust the alignment of the menu container, by default opens from right side.
{% endtab %}

{% tab title="Off-Canvas Top" %}
**Items Per Row**\
Divides the navigation menu items into columns within each row.

**Widgets**\
Choose whether to display widgets within the menu container. The widgets displayed here are sourced from the **Off-Canvas Top** sidebar.

**Columns**\
Determines how many columns the widgets are divided into.

**Container**\
Defines the size of the widget container relative to the Menu Container.
{% endtab %}
{% endtabs %}

***

### Text

Allows you to insert custom text into your header for announcements, taglines, or other information. It supports shortcodes and HTML as well.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-2b23b92a41818c770aab6fc2e8264a1dee6ccf40%2FHeader%20Element%20-%20Text.jpg?alt=media" alt="" width="285"><figcaption></figcaption></figure>

***

### Search Field

Provides a search bar that enables users to search your site directly from the header.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-9b00a22bb499426f38656467eb95b41247701b4e%2FHeader%20Element%20-%20Search%20Field.jpg?alt=media" alt="" width="284"><figcaption></figcaption></figure>

**Search Field Alignment**\
The alignment of the input field in relation with the search button (:mag\_right: icon). Useful to avoid search input overflow the container.

**Search Field Visibility**\
By default, the search input is hidden. It will only become visible when users click on the search icon :mag\_right:. If you set the value to **Always**, the search input will remain visible at all times.​

**Icon Animation**\
Applicable when using **On click** search visibility, this setting will apply an animation effect when the search input is focused.

***

### Social Icons

Adds icons linking to your social media profiles, enabling users to connect with you on various platforms.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-27a77e223ee6447bc6bf956d583279058b3c18c1%2FHeader%20Element%20-%20Social%20Icons.jpg?alt=media" alt="" width="283"><figcaption></figcaption></figure>

{% tabs %}
{% tab title="Content" %}
**Icon**\
Controls whether the social network icon is displayed.

**Label**\
Determines whether to display the label alongside the social network icon.

**Spacing**\
The spacing between social network icons.

**Size**\
The size of the social media icon.

**Shape Type**\
Applies around the icon only. Set to anything other than **None** and the icon gains a rounded, square or custom-radius background.

**Shape Radius**\
The corner radius, shown when **Shape Type** is *Custom*.

**Shape Fill**\
If the shape option is applied, you can choose to display it with a solid background or as an outline border.​
{% endtab %}

{% tab title="Links" %}
**Open in New Tab**\
As the name suggests, this option will open the links in a new window or tab.

**Nofollow**\
If checked, prevents search engines from following the link.
{% endtab %}

{% tab title="Colors" %}
Brand colors of social icons are defined in **Appearance -> Customize -> General -> Social Icons**

**Color**\
The color of the icon or label. It can be Brand color, or any custom color you like.\
\
**Hover Color**\
The hover color of the icon or label.

**Label Color**\
If label is set to visible, it will inherit color from previous option, or set custom color for label only.

**Label Hover Color**\
The color to apply on hover for the label only. Inherits the color from Color option by default.

**Background**\
If the shape is applied, then the background color of the shape can be set here.

**Hover Background**\
The hover color of shape background.
{% endtab %}
{% endtabs %}

***

### Button

Inserts a customizable button into your header for calls to action or other important links.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-9740c9d8998b9f94b39ef33772eadb20802d9c25%2FHeader%20Element%20-%20Button.jpg?alt=media" alt="" width="284"><figcaption></figcaption></figure>

{% tabs %}
{% tab title="Content" %}
**Label**\
The text displayed on the button.

**Link**\
The URL the button directs to.​

**Open in New Tab**\
Whether the link opens in a new window or tab.​

**CSS Classes**\
Extra classes added to the button, for targeting it from Custom CSS.
{% endtab %}

{% tab title="Color & Fill" %}

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-15e97737413306f4a1126300e624a1ea9a5c7cb0%2FHeader%20Builder%20-%20Button%20Color.jpg?alt=media" alt="" width="281"><figcaption></figcaption></figure>

**Background**\
The button background colors for *Normal*, *Hover*, and *Active* states.

**Text**\
The button text colors for *Normal*, *Hover*, and *Active* states.

***

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-be6685d57b794ef54d36231fa58803849cca4dd7%2FHeader%20Builder%20-%20Button%20Fill.jpg?alt=media" alt="" width="276"><figcaption></figcaption></figure>

**Fill Type**\
Determines whether the button has an outline or a solid background
{% endtab %}

{% tab title="Layout" %}
**Padding**\
Controls the space inside the button between its content and border.

**Border Radius**\
Sets the roundness of the button’s corners.
{% endtab %}
{% endtabs %}

***

### Date and Time

Displays the current date and time in your header, which can be useful for event-related sites or general information.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-bb432478f9bfef5f5d7d7a0c686feca3687ca729%2FHeader%20Builder%20-%20Date%20and%20Time.jpg?alt=media" alt="" width="282"><figcaption></figcaption></figure>

**Date or Time Format**\
Customize the format for displaying date or time. For more details, refer to the [WordPress date format documentation](https://wordpress.org/support/article/formatting-date-and-time/).

***

### My Account

Adds a section for user account management, allowing users to log in or access their account details.

{% hint style="info" %}
Note: The **WooCommerce** plugin is required for this element to function.
{% endhint %}

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-3537f38a54377fe03662d2254087981fe51b4a96%2FHeader%20Builder%20-%20My%20Account.jpg?alt=media" alt="" width="285"><figcaption></figcaption></figure>

**Login Text**\
Text displayed for guests (users who are not logged in).

**Logged In Text**\
Text displayed for logged-in users.

**Show Icon**\
The account icon displayed to the left of the text.​

***

### Cart Totals

Shows the total amount of items and cost in the shopping cart, ideal for e-commerce sites.

{% hint style="info" %}
Note: The **WooCommerce** plugin is required for this element to function.
{% endhint %}

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-6c4f44b8f602c34cf3926d36f906d873f9d705e4%2FHeader%20Builder%20-%20Cart%20Totals.jpg?alt=media" alt="" width="284"><figcaption></figcaption></figure>

**Total Price**\
Define how the total price is calculated and displayed: cart totals, subtotals, or totals excluding taxes.

**Prefix Text**\
The text shown before the price numbers.

**Hide Empty Cart**\
Hides the element completely when the cart is empty.

***

### Cart

Displays a cart icon with a summary of items, enabling quick access to the shopping cart.

{% hint style="info" %}
Note: The **WooCommerce** plugin is required for this element to function.
{% endhint %}

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-ac547955d9b0dfc6d643e22d470779f7df8aed23%2FHeader%20Builder%20-%20Cart.jpg?alt=media" alt="" width="284"><figcaption></figcaption></figure>

**Icon**\
Choose to show the cart icon or hide it.

**Title**\
Optional text displayed next to the icon.

**Hide when Empty**\
Hides the element completely when the cart is empty.

**Counter Badge**\
Option to display the number of items in the cart.

**Click Action**\
Choose whether clicking the icon shows a mini cart popup or redirects to the cart page.

Two more settings sit in the **Popup** section, and apply when **Click Action** is set to **Show Mini Cart**:

**Show On**\
The mouse event (**Click** or **Hover**) that opens the mini cart popup.

**Alignment**\
The position of the popup relative to the clicked icon.

***

### Language Switcher

Allows users to switch between different languages on your site, useful for multilingual websites.

{% hint style="info" %}
Note: The **WPML** plugin is required for this element to function.
{% endhint %}

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-7a6a1dc7f36c37f51474b45dff2094d9d5a954a1%2FHeader%20Builder%20-%20Language%20Switcher.jpg?alt=media" alt="" width="285"><figcaption></figcaption></figure>

**Show Flag**\
Whether the language flag is shown at all. On by default.

**Flag Position**\
Available when **Show Flag** is enabled, this option sets the flag’s placement relative to the language name.

**Show Label**\
Whether the language name is shown next to the flag. On by default.

**Label Format**\
Choose how language names are displayed, including their native and translated forms

**Skip Missing Translations**\
Skip displaying languages in the list if no translations are available for the current page.

***

### Breadcrumb

Provides a breadcrumb trail that shows the user’s current location within the site hierarchy, improving navigation and user experience.

{% hint style="info" %}
Note: The **Breadcrumb NavXT** plugin is required for this element to function.
{% endhint %}

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-7ebc32425c7df345f4b9834e019dec056a82edeb%2FHeader%20Builder%20-%20Breadcrumb.jpg?alt=media" alt="" width="283"><figcaption></figcaption></figure>

**Separator**\
The character or string printed between each step of the trail.

***

### Common Options

Every element in the header builder has these two, except the **Row**, which has only its Content Align. In the **Mobile Menu** builder no element has **Visible On**.

**Visible On**\
Manage the visibility of each header element across different viewports, including Desktop, Tablet, and Mobile. This feature ensures that you can tailor the display of elements based on the user’s device, enhancing the overall user experience.

**Custom CSS**\
Apply additional styling to each element with Custom CSS. This option allows you to add your own custom styles, providing greater control over the appearance and design of header elements beyond the default options

**Style Options**\
All style options are applied from the Style tab in the Header section. The following section will guide you through styling each header element in detail.

{% content-ref url="/pages/us1I39KVyqnYPdUtmZVh" %}
[Styling](/general/header/styling.md)
{% endcontent-ref %}

***

### Where spacing comes from

With one exception, header elements deliberately don't carry Margin, Padding, Border or Dimensions settings the way footer and product card elements do. That's intentional. It keeps headers consistent rather than letting every element drift. The exception is the **Button**, which has its own **Padding** and **Border Radius**.

Spacing in the header comes from three places instead:

* **The Row element's Content Align**, for spreading or grouping things across a row
* **An element's own spacing setting**, such as **Menu Item Spacing** on the Menu
* **The Header Style tab** in the Customizer, for padding around the header itself

For anything those three can't do, use the element's **Custom CSS**.

***

### The same elements elsewhere

The **Top Bar** and **Mobile Menu** builders draw on the same element list, each with a few differences.

The **Top Bar** has everything the header has except **Menu Trigger** and **Cart**. Element settings are identical.

The **Mobile Menu** is a shorter list: **Menu**, **Search Field**, **Social Icons**, **Text**, **Button**, **Cart Totals** and **Language Switcher**. Three things differ:

* Its **Menu** element points at the **Mobile Menu** location rather than the main menu, and drops **Mobile Menu Trigger** and **Trigger Position**, which a mobile panel has no use for
* Its **Search Field** has just a **Placeholder** and a **Max Width**, rather than the alignment and animation settings the header version has
* **No element there has Visible On.** The mobile menu only appears below the breakpoint, so per-device visibility would have nothing to decide

{% content-ref url="/pages/nMT7PoeOkYmpfHsFQFTc" %}
[Mobile Menu](/general/header/mobile-menu.md)
{% endcontent-ref %}

{% content-ref url="/pages/HdLqlAqX3es0UigfHXRD" %}
[Top Bar](/general/header/top-bar.md)
{% endcontent-ref %}

***

### If an element is missing from the list

**Cart, Cart Totals or My Account**\
WooCommerce isn't active.

**Language Switcher**\
WPML isn't active.

**Breadcrumb**\
The Breadcrumb NavXT plugin isn't installed.

**There's no Logo element**\
By design. The logo is set once under **Customize -> Styling -> Brand**, and the header builder positions elements around it. Left Content sits to its left, Right Content to its right.

{% content-ref url="/pages/r5oQ7KJPLKs7pwpyVuAw" %}
[Brand and Logo](/styling/brand-and-logo.md)
{% endcontent-ref %}