# Main

Under the Main tab of the Header, you can choose one of the available header templates and configure its main parameters. 

{% hint style="warning" %}
The contents of the Main tab vary based on the chosen [**Header Layout.**](#header-layout)
{% endhint %}

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

## Header Layout

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

Here, the main header template for your website can be selected. The current available options are:

{% tabs %}
{% tab title="Header Footer Elementor" %}

<figure><img src="/files/4uhETcQr8wbaCVmbdT96" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Focus" %}

<figure><img src="/files/8rJ0xLRG9b1B6TaLhI9s" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Classic" %}

<figure><img src="/files/NcfLcB6rDFooJr4jES7J" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Light" %}

<figure><img src="/files/smnsjE2KZ1as63GIiqCv" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="warning" %}
If the **Header Footer Elementor** layout is selected, the rest of the tab's settings cannot be modified. Instead, you can edit the header directly from the plugin itself by following **WP Dashboard > UAE > Header & Footer Builder > Edit with Elementor.**
{% endhint %}

## Sticky

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

The setting is available in all layouts **except** Header & Footer Elementor. Once enabled, the header of the website remains visible when scrolling.

## Desktop Header Settings

Customize the appearance of the header for **desktop view**. Settings vary based on the [**chosen layout.**](#header-layout)&#x20;

<figure><img src="/files/h6yrvHqTGcQCcsyJ985F" alt=""><figcaption><p>Example: Focus Header Layout</p></figcaption></figure>

Here are the available settings for **Focus**, **Light,** and **Classic l**ayouts:

{% tabs %}
{% tab title="Focus and Light" %}

<figure><img src="/files/Dlb50dBEQTX3cAEnLzWV" alt=""><figcaption><p>Desktop Header Settings for Focus and Light</p></figcaption></figure>

* **Sticky Background Color** – Set the background color of the header when it becomes [sticky](#sticky).
* **Header Background Color** – Set the regular background color of the header.
* **Header Text Color** – Define the color of the header text.
* **Header Socials Icon Color** – Set the color of the social media icons in the header.
* **Header Socials Hover Icon Color** – Set the color of the social icons when hovered over.
* **Header Border Bottom Color** – Set the color and transparency for the header's bottom border.
* **Header Height** – Enter a custom height for the desktop header in pixels.
  {% endtab %}

{% tab title="Classic" %}

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

* **Sticky Background Color** – Set the background color for the header when it is in sticky mode.
* **Header Background Color** – Define the standard background color of the desktop header.
* **Header Text Color** – Choose the color for the header text.
* **Header Border Bottom Color** – Set the color and transparency of the bottom border of the header.
* **Sticky Header Height** – Specify the height of the header when it becomes sticky (enter a value in pixels).
* **Header Height** – Set the overall height of the desktop header (enter a value in pixels).
  {% endtab %}
  {% endtabs %}

## Mobile Header Settings

In this section, you can adjust the header design specifically for mobile devices.&#x20;

<figure><img src="/files/mIc4ShWbX7Si5Je66BAp" alt=""><figcaption><p>Example Mobile Header for the Focus Layout</p></figcaption></figure>

Settings vary based on the [**chosen layout.**](#header-layout) Here are the available settings for **Focus**, **Light,** and **Classic l**ayouts:

{% tabs %}
{% tab title="Focus and Light" %}

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

* **Mobile Header Background Color** – Set the background color of the mobile header.
* **Mobile Header Text Color** – Define the text color in the mobile header.
* **Mobile Header Border Bottom Color** – Set the bottom border color of the mobile header.
* **Mobile Contacts Button Icon** – Choose an icon for the mobile contact button and set its color and size.
* **Mobile Contacts Close Button Icon** – Choose an icon for closing the mobile contacts popup and set its color and size.
* **Mobile Contacts Close Button Background Color** – Set the background color for the mobile contacts close button.
  {% endtab %}

{% tab title="Classic" %}

<figure><img src="/files/NMaytVxNoBjxHy551PPd" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Main Phone Settings

Manage the display of the main contact phone number in the header.

<figure><img src="/files/BXUE45CpyVtDRTsOHeMW" alt=""><figcaption><p>Example of Main Phone Setting from Focus Layout</p></figcaption></figure>

Settings vary based on the [**chosen layout.**](#header-layout) Here are the available settings for **Focus and Light l**ayouts:

{% tabs %}
{% tab title="Focus" %}

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

* **Main Phone Icon** – Select an icon for the main phone contact using the icon picker.
* **Icon Color** – Define the color of the main phone icon.
* **Icon Size** – Set the size of the main phone icon in pixels.
* **Main Phone Label Color** – Choose the color for the label associated with the main phone.
* **Main Phone Label** – Set the label text that will appear next to the main phone number (e.g., "Sales").
* **Main Phone** – Enter the main phone number to display.

***

* **Secondary Phone 1 Label Color** – Set the color for the first secondary phone's label.
* **Secondary Phone 1 Label** – Enter a label for the first secondary phone (e.g., "Service").
* **Secondary Phone 1** – Provide the first secondary phone number.

***

* **Secondary Phone 2 Label Color** – Set the color for the second secondary phone's label.
* **Secondary Phone 2 Label** – Enter a label for the second secondary phone (e.g., "Parts").
* **Secondary Phone 2** – Provide the second secondary phone number.
  {% endtab %}

{% tab title="Light" %}

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

* **Main Phone Icon** – Select an icon to represent the main phone contact and customize its color and size.
* **Main Phone** – Enter the main phone number to be displayed.
  {% endtab %}
  {% endtabs %}

## Adress Settings

This section is available only in the **Focus layout**, and here you can configure the display of the physical address in the header or contact area.

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

Here are the available settings:

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

* **Address Icon** – Select an icon to represent the address using the icon picker.
* **Icon Color** – Define the color of the address icon.
* **Icon Size** – Set the size of the address icon in pixels.
* **Address** – Enter the physical address to be displayed.


---

# 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://docs.stylemixthemes.com/motors-car-dealer-classifieds-and-listing/motors-skins/theme-options/header/main.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.