# Header

In the Header section, you can find the settings where you can adjust each element of the header.

There are 6 sub-panels: 

* [**Main**](#main)
* [**Sticky**](#sticky)
* [**Logo\&Title**](#logo-and-title)
* [**Menu**](#menu)
* [**Buttons/Action**](#buttons-actions)
* [**Socials** ](#socials)

See below for information on what each section contains.

{% hint style="info" %}
The Header settings may differ depending on the Installed layout and selected Header Style.
{% endhint %}

## **Main**

### **Header Layout**

On the **Header Layout** field, you can select the header style of your website.

![](/files/-MgCjV__NutWz6CAaOMF)

Let's have a look at the header styles:

**Dealer:**

![](/files/-MgCiW0GSKSmtAQbkySG)

**Dealer Two:**

![](/files/-MgCiGdKiVOeGcIv4oq8)

**Classified:**

![](/files/-MgCh_faifS-u8fMetp8)

**Classified Five:**

![](/files/-MgCgp3xUfMAMuvuWDrd)

**Boats:**

![](/files/-MgCfm22hT_zKUvqm2ns)

**Motorcycle:**

![](/files/-MgCfUxmeBsGFX3zf7tC)

**Rental:**

![](/files/-MgCf9hTNP76bU65_rfy)

**Magazine:**

![](/files/-MgCeoS7Dg0p2PqlLu1o)

**Aircrafts:**

![](/files/-MgCeX1pxVYKD_EPyL9A)

**Equipment:**

![](/files/-MgCeDgFfm9oRVFao8JR)

### **Header Background Color**

On the **Header Background Color** field, you can set the header background color.

![](/files/-MgCk6gfF6rfVWQZwgQB)

{% hint style="info" %}
**The indicated color will not apply if the Transparent Header option for the page is enabled under the Page option area:**
{% endhint %}

![](/files/-MgCmiIApJFZ-sgddrmm)

### **Mobile Header Background Color**

**‌**Set the header background color on the **Mobile Header Background Color** field.

{% hint style="info" %}
This option **is available** only on the **Dealer, Motorcycles,** and **Magazine header styles.**
{% endhint %}

![](/files/-MgCkyKjkJkfIf0cFpiV)

![Mobile Header](/files/-MgCl7opdObAGq3ynTIB)

### **Listing Layout Header Image for Non-transparent Option**

**‌**Also, you can use the image as a header background. Upload your wished image under this field.

{% hint style="info" %}
This option **is available** only in the **Classified header style.**
{% endhint %}

![](/files/-MgCmCUcSc-4Ig0u773c)

### **Menu\&Icons Area Margin**

**‌**Here you can set the margins for the menu and icon area.

![](/files/-MgCoEJlNzVxHMN7ha12)

![](/files/-MgCoT3r7xW-i29AWA9P)

### **Header Text Color**

**‌**On the Header text color section indicate the color of the text on the header area:

{% hint style="info" %}
This option is **not available** on the **Dealer Two, Classified, Classified Five,** and **Aircrafts header style.**
{% endhint %}

![](/files/-MgCojekRJff7EvA7DkR)

![](/files/-MgConYMOVZ5Lzy011eR)

### **‌Mobile Header Text Color**

**‌**Here you can  set the mobile header text color:

![](/files/-MYi6x1FJZv2csjdCA0V)

![](/files/-MYi7jz_9whFX_SMEfJR)

### **Header Socials Icon Color**

Set the color of socials icons on the header area on the Header Socials Icon Color field.

{% hint style="info" %}
This option **is available** only on the **Dealer, Motorcycles,** and **Magazine header styles.**
{% endhint %}

![](/files/-MgCpQNcE4hXHm1jJcj4)

![](/files/-MgCp8x2jdbnGzNLXe8O)

{% hint style="info" %}
To specify which social to display on the header area go to the **Header > Socials** section in the Theme Options.

The social networks buttons will be displayed only if the links to these social networks are provided in the Socials tab ([**Theme Options > Socials**](/motors-theme-documentation/theme-options/socials.md))
{% endhint %}

### **‌Phone Settings**

**‌**On the phone settings area, indicate the contact phone to display them on the header.

{% hint style="info" %}
The Phone Settings option is available only on the **Dealer**, **Motorcycles**, **Rental**, and **Equipment header styles**. However, the available options in this section may vary depending on this header style.
{% endhint %}

{% tabs %}
{% tab title="Dealer header style" %}
![](/files/-MYdo3r_hKPAppAmea0n)
{% endtab %}

{% tab title="Motorcycles header style" %}
![](/files/-MYdo8VnwcarQ8dh79GD)
{% endtab %}

{% tab title="Rental header style" %}
![](/files/-MYdoF9NbJisn-b2YK7i)
{% endtab %}

{% tab title="Equipment header style" %}
![](/files/-MYdoLuWjfpf2IAGtPBJ)
{% endtab %}
{% endtabs %}

On the **Dealer header style,** there are two phone fields: **Main** and **Secondary.** The **Main** contact phone displays on **the mobile header.**

### **Address Settings**

**‌**On the **Address settings** area set the address section on the header. On the **Address** field specify your address. **Pick** the address **Icon** and indicate the **icon size** on the **Address Icon section**.

![](/files/-MYiTB47l0L9CTw9AgA8)

On the **Google Map Address URL** section insert the map embed link to show this address on the pop-up map. 

![](/files/-MYiVcuh-2O3PUjFowPv)

To get the **embed map code**, open your needed address on Google Maps, click the **Share button and open the** Embed a map section. Use the link inside the SRC attribute:

![](/files/-MYiViJGDWbyQXR9H-lo)

## **Sticky**

Here you can enable the Sticky header, set the paddings, and indicate the background color of the sticky header.

![](/files/-MgCppcT2CX2dF8vxFCU)

{% hint style="info" %}
**The sticky header does not work on the mobile header.**
{% endhint %}

## **Logo & Title**

In this section, you can set the website logo and title settings.

### **‌Logo**

On the **Logo** field, upload the Logo file.

![](/files/-MYe28u6fkusalS2Dzzb)

### Logo Width (px)

Specify the logo image width in px on the Logo Width (px) field.

![](/files/-MYiqA8_cRaDxZzADsqB)

{% hint style="info" %}
The height of the logo image will increase proportionately.
{% endhint %}

### Text Logo Font Family

If there is no Logo image upload, the **Website Title** will be displayed instead of the logo. On the **Text Logo Font Family area**, configure the logo font settings as **font family**, **font-weight** & **Style**, **font size**, **font color**, and so on.

{% hint style="info" %}
The **website title** can be changed on the **Settings > General** section of the admin dashboard. 
{% endhint %}

![](/files/-MYe4Mag4pwSl5E9OF1_)

## **Menu**

Here you can set the header menu font and color settings.

### **Main Menu Font Settings**

**‌**You can select the **font family**, specify **font-weight, and style**, adjust the **font size, text-align, text-transform,** and **line-height** of the menu text. Also, select the **Backup Font Family** as the fallback if the main font will not be loaded.

![](/files/-MYiWamMewQsWXguqiAc)

![Dealer header style](/files/-MYe9LVW50WRP35AuimU)

### **SubMenu Font Family**

On the **SubMenu Font Family** field set the sub menu's text **Font Family**, **Font Color,** and **Backup Family:**

![](/files/-MYeA-VQsY7XoLAygvIy)

![Dealer header style](/files/-MYeAf1vQJGbetbCPas1)

### **Margin**

Adjust the Menu section Margin options:

![](/files/-MYeBpxxRHlJcuq5bHkt)

![Dealer header style](/files/-MYeChmn09KvGwwV9vml)

### **‌Item Padding**

On the **Item Padding** field indicate the padding option for menu items: 

![](/files/-MYeD56VgUQRt8RpMrvb)

![Dealer header style](/files/-MYeEPJpg0415LwPn2-f)

### **Background Color**

Here you can set the menu section background color.

{% hint style="info" %}
This option **is available** only on the **Dealer** and **Motorcycle** header styles.
{% endhint %}

![](/files/-MYhX84B2TDNpXyjPD37)

{% tabs %}
{% tab title="Dealer header styles" %}
![](/files/-MYi_iAciQPct89Jrc9e)
{% endtab %}

{% tab title="Motorcycle header style" %}
![](/files/-MYi_bq5QBWs8VS_JGNs)
{% endtab %}
{% endtabs %}

{% hint style="info" %}
**The indicated color will not apply if the Transparent Header option for the page is enabled under the Page option area:**
{% endhint %}

![](/files/-MYhVpC7lLkYLibcn2_9)

### **Item Background Color**

Set the background color of menu items blocks:

{% hint style="info" %}
The **Item Background Color** option **is not available** on the **Rental header style.**
{% endhint %}

![](/files/-MYhXfnf4rfs0y1cgsED)

![Dealer header style](/files/-MYhXZNcH-ZVqWPEijps)

### **Item Hover Background Color**

Indicate the menu item block hover color:

![](/files/-MYhYC_bBR_36s7YAviT)

{% hint style="info" %}
This option is available only on the **Dealer** and **Motorcycle** header styles.
{% endhint %}

{% tabs %}
{% tab title="Dealer header styles" %}
![](/files/-MYiaKIrX1M59z713pY4)
{% endtab %}

{% tab title="Motorcycle header style" %}
![](/files/-MYiaF64KuHFXtsP0aef)
{% endtab %}
{% endtabs %}

### Item Hover Text Color

On the Item Hover Text Color set the menu item text color on hover action:

{% hint style="info" %}
The **Item Hover Text Color** option **is not available** on the **Rental header style.**
{% endhint %}

![](/files/-MYhZp7qIZOb_XM2_BOu)

![](/files/-MYiXqakftaGmGiG-NRF)

## **Buttons/Actions**

**‌**On the Button/Action tab located the settings of the header icons.

### **Show Compare**

Enable the **Show Compare** button to display it on the header area. Pick the icon, indicate the **icon color,** and set the **icon size** on the **Compare Icon** section: 

{% hint style="info" %}
The **Show Compare** option **is not available** on the **Rental header style.**
{% endhint %}

![](/files/-MYh_H9zSkdcm6cUf30Y)

![Dealer header style](/files/-MYha-tJBEMJHuSRcRUc)

{% hint style="info" %}
The compare page should be indicated under the [**Theme Option > Invetry Settings > Main > Compare Page** ](/motors-theme-documentation/theme-options/inventory-settings.md#compare-page)field. 
{% endhint %}

### **Show Cart**

Display the **WooCommerce cart** on the header by enabling the Show Cart option:

{% hint style="info" %}
The **Show Cart** option **is not available** on the **Rental header style.**
{% endhint %}

![](/files/-MYhbvCpORUVtVBmDDOS)

![Dealer header style](/files/-MYhbY9BO-rkE41oEN6A)

{% hint style="info" %}
**The cart requires the WooCommerce plugin to be installed and set up**.   
{% endhint %}

### **Compare** and **Cart Buttons Hover Background Color**

**‌**Here you can set the **Compare** and **Cart** buttons background color **on hover**: 

![](/files/-MYhesBE8-X1Wj3gfs29)

![Dealer header style](/files/-MYhf5m7emq_BMEOsnX5)

### **Compare** and **Cart Buttons Hover Text Color**

Set the **Compare** and **Cart** buttons **Text color** on hover: 

![](/files/-MYhfTAxmVxUEo6RXKav)

![Dealer header style](/files/-MYhgatCbIc6p_OKmNI1)

### **Show Profile**

Enable the **Show Profile** button to display the **Profile icon** on the header.

{% hint style="info" %}
The **Add a Car button** is **available** on the **Classified** and **Classified Five header style.** 
{% endhint %}

![](/files/-MYhh0IxXyTsa1GTIHMg)

On the **Profile icon** settings configure the icon options and set the **profile button hover background color** and **profile button hover text color** on appropriate fields:

{% tabs %}
{% tab title="Classified header style" %}
![](/files/-MYidhFViNbBOrsjTZDO)
{% endtab %}

{% tab title=" Classified Five header style" %}
![](/files/-MYidoYbphvk4X7hpP_5)
{% endtab %}
{% endtabs %}

### **Add a Car Button**

Display the **Add a Car** on the header by enabling the **Show Add a Car Button.**

{% hint style="info" %}
The **Add a Car button** displaying depends on the installed layout, not on the selected header style**.** The **Add a Car button** is available on the **Classified Listing**, **Classified Listing** **Two/Three/Four**, **Classified Ads (with different types**), and **Classified Ads Two (with different types)** layouts. 
{% endhint %}

![](/files/-MYhoBKfZd1MVUCfveDQ)

On the **Label** field indicate the **Add a Car button text.** Set the button options as **background color**, **hover color**, **text color**, **add car icon** settings on the appropriate fields. Enter the **Add a Car page URL slug** on the **Link field** as below:

![](/files/-MYhukpTxPChxdBAbndX)

{% hint style="info" %}
The **Add a car** should be indicated under the [**Theme Option > User Dealer > Add a car**](https://docs.stylemixthemes.com/motors-theme-documentation/theme-options/user-dealer#add-a-car-page) field.
{% endhint %}

### **Show Search Button**

Enable the **WordPress default search** option on the header area.

{% hint style="info" %}
This option **is available** only on the **Dealer header style**.
{% endhint %}

![](/files/-MYhjPy4zExi38idSKuz)

Configure the search icon option on the Search Button Icon area. Indicate the icon **hover background color** and **text color on hover** on the **Search Button Hover Background Color** and **Search Button Hover Icon Color** fields respectively. 

![](/files/-MYhy-Gkdxrqxwi2GY_z)

## **Socials**

On the Socials section specify which socials to display on the header.

![](/files/-MYeB-fn4sZiX_LW542z)

{% hint style="info" %}
The social networks' buttons will be displayed only if the links to these social networks are provided in the Socials tab (**Theme options > Socials**)
{% endhint %}


---

# 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-theme-documentation/theme-options/header.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.