# 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 %}

## Header Layout

Here, the main header template for your website can be selected. The current available options are: {% tabs %} {% tab title="Header Footer Elementor" %}

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

{% endtab %} {% tab title="Classic" %}

{% endtab %} {% tab title="Light" %}

{% 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

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)

Here are the available settings for **Focus**, **Light,** and **Classic l**ayouts: {% tabs %} {% tab title="Focus and Light" %}

Desktop Header Settings for Focus and Light

* **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" %}

* **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.

Example Mobile Header for the Focus Layout

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" %}

* **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" %}

{% endtab %} {% endtabs %} ## Main Phone Settings Manage the display of the main contact phone number in the header.

Example of Main Phone Setting from Focus Layout

Settings vary based on the [**chosen layout.**](#header-layout) Here are the available settings for **Focus and Light l**ayouts: {% tabs %} {% tab title="Focus" %}

* **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" %}

* **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.

Here are the available settings:

* **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.