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

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MgCipeOI79PZBmrjdgV%2F-MgCjV__NutWz6CAaOMF%2Fheader_themeOption.jpg?alt=media\&token=72cc0cd7-2fd7-4e17-8f1b-1af2c0b9dd0e)

Let's have a look at the header styles:

**Dealer:**

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MgCdiR_LH4VOSuOfsD9%2F-MgCiW0GSKSmtAQbkySG%2Fheader_dealer.png?alt=media\&token=ca8cf69b-b780-49c1-8336-bd9096bfca48)

**Dealer Two:**

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MgCdiR_LH4VOSuOfsD9%2F-MgCiGdKiVOeGcIv4oq8%2Fheader_dealer_two.png?alt=media\&token=192b2289-e34a-4dfb-bbe9-2f6411936579)

**Classified:**

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MgCdiR_LH4VOSuOfsD9%2F-MgCh_faifS-u8fMetp8%2FHeader_Classifie.png?alt=media\&token=5ed9599c-43c4-4dee-870c-ee570da71935)

**Classified Five:**

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MgCdiR_LH4VOSuOfsD9%2F-MgCgp3xUfMAMuvuWDrd%2FHeader_Classified_Five.png?alt=media\&token=55614e7b-1374-41e5-bd0e-9baefdafb2a3)

**Boats:**

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MgCdiR_LH4VOSuOfsD9%2F-MgCfm22hT_zKUvqm2ns%2Fheader_boats.png?alt=media\&token=75d892ed-3b78-4fc7-93d2-d80d9691d029)

**Motorcycle:**

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MgCdiR_LH4VOSuOfsD9%2F-MgCfUxmeBsGFX3zf7tC%2Fheader_motorcycles.png?alt=media\&token=eaa383eb-27c0-48b0-abdd-d72be6e8dc4e)

**Rental:**

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MgCdiR_LH4VOSuOfsD9%2F-MgCf9hTNP76bU65_rfy%2Fheader_rental.png?alt=media\&token=3b439827-b3c7-4e30-96b2-b573a0daf00d)

**Magazine:**

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MgCdiR_LH4VOSuOfsD9%2F-MgCeoS7Dg0p2PqlLu1o%2Fheader_carmagazine.png?alt=media\&token=ff7203bb-c86d-4ed0-b811-9c22faedcd85)

**Aircrafts:**

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MgCdiR_LH4VOSuOfsD9%2F-MgCeX1pxVYKD_EPyL9A%2Fheader_aircrafts.png?alt=media\&token=7695ea0c-b598-4e36-8385-33e8e4a38fd8)

**Equipment:**

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MgCdiR_LH4VOSuOfsD9%2F-MgCeDgFfm9oRVFao8JR%2Fheader_equipment.png?alt=media\&token=2dc1f548-d936-4e9c-8898-a9340ed3c446)

### **Header Background Color**

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

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MgCipeOI79PZBmrjdgV%2F-MgCk6gfF6rfVWQZwgQB%2Fheader_background.png?alt=media\&token=f96f7a13-8c60-438e-a1d3-461322d2c92a)

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

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MgCmIW82WrdrZkCKWc3%2F-MgCmiIApJFZ-sgddrmm%2Fheader_options.png?alt=media\&token=e6219cb2-5162-45b1-87aa-f3e1639fb63a)

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

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MgCipeOI79PZBmrjdgV%2F-MgCkyKjkJkfIf0cFpiV%2Fmobile_header.png?alt=media\&token=62a524df-bcb3-4660-8382-95dbe3242b9c)

![Mobile Header](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MgCipeOI79PZBmrjdgV%2F-MgCl7opdObAGq3ynTIB%2Fmobile_header_2.png?alt=media\&token=d198927c-f66c-400c-8874-9d06a08b116d)

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

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MgClEtaKShLi-v8-1RH%2F-MgCmCUcSc-4Ig0u773c%2Fheader_old.png?alt=media\&token=6119c36c-714f-4bc7-bb7d-19464f26e8b4)

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

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

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MgCmIW82WrdrZkCKWc3%2F-MgCoEJlNzVxHMN7ha12%2Fheader_margin2.png?alt=media\&token=2e767d68-73f3-48c8-a89c-270ec6392072)

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MgCmIW82WrdrZkCKWc3%2F-MgCoT3r7xW-i29AWA9P%2Fheader_margin_2.jpg?alt=media\&token=0a7d418c-68cf-41f8-972b-f592d3a1b394)

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

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MgCmIW82WrdrZkCKWc3%2F-MgCojekRJff7EvA7DkR%2Fheader_textColor.png?alt=media\&token=80dc4de9-9404-4983-9780-c921335a7e12)

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MgCmIW82WrdrZkCKWc3%2F-MgConYMOVZ5Lzy011eR%2Fheader_textColor2.png?alt=media\&token=e3e43804-aa35-40e2-8af5-c69d682ec6b5)

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

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

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYi61Oz2hiyIZaY8iD2%2F-MYi6x1FJZv2csjdCA0V%2Fimage.png?alt=media\&token=7091dd4c-122b-477d-b6b1-5499747b1a71)

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYi61Oz2hiyIZaY8iD2%2F-MYi7jz_9whFX_SMEfJR%2Fimage.png?alt=media\&token=cb3345d1-848c-4d8e-a827-9ca5fb752bee)

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

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MgCmIW82WrdrZkCKWc3%2F-MgCpQNcE4hXHm1jJcj4%2F11494746-c1f3be44ad81114a7916591577e0087b.png?alt=media\&token=ad8eede2-87c8-4799-ae13-3eee77f99468)

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MgCmIW82WrdrZkCKWc3%2F-MgCp8x2jdbnGzNLXe8O%2Fheader_socialColor2.png?alt=media\&token=4c19d9d1-2c9b-4737-ae62-89c6dfd26946)

{% 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**](https://docs.stylemixthemes.com/motors-theme-documentation/theme-options/socials))
{% 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" %}
![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYdjwJHU9Q-L-VRBBzK%2F-MYdo3r_hKPAppAmea0n%2Fimage.png?alt=media\&token=e8291661-06d5-4ff3-bb3c-320ffb776482)
{% endtab %}

{% tab title="Motorcycles header style" %}
![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYdjwJHU9Q-L-VRBBzK%2F-MYdo8VnwcarQ8dh79GD%2Fimage.png?alt=media\&token=2f0d942b-6bbd-4a89-b6cc-c82a258134d5)
{% endtab %}

{% tab title="Rental header style" %}
![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYdjwJHU9Q-L-VRBBzK%2F-MYdoF9NbJisn-b2YK7i%2Fimage.png?alt=media\&token=55b3577f-1dfb-4934-af7e-df25b5d07fa6)
{% endtab %}

{% tab title="Equipment header style" %}
![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYdjwJHU9Q-L-VRBBzK%2F-MYdoLuWjfpf2IAGtPBJ%2Fimage.png?alt=media\&token=09aa09c4-b4ac-4f01-96ff-0028035b168c)
{% 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**.

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYiArmtMT4zNfsaD11H%2F-MYiTB47l0L9CTw9AgA8%2Fimage.png?alt=media\&token=6a50f978-ca31-4b01-8a68-406adb0643bd)

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

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYiArmtMT4zNfsaD11H%2F-MYiVcuh-2O3PUjFowPv%2Fchrome-capture%20\(8\)%20\(1\).gif?alt=media\&token=b061d53b-e567-45b4-b9f1-502b63024e73)

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:

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYiArmtMT4zNfsaD11H%2F-MYiViJGDWbyQXR9H-lo%2Fchrome-capture%20\(7\)%20\(1\).gif?alt=media\&token=1affd150-7d12-4e96-881a-ae127e905736)

## **Sticky**

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

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MgCmIW82WrdrZkCKWc3%2F-MgCppcT2CX2dF8vxFCU%2Fheader_sticky.png?alt=media\&token=7114cc0f-21fa-439a-9c32-f9aa8fb765e0)

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

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYe-TwGdrUfxzl6_J3k%2F-MYe28u6fkusalS2Dzzb%2Fimage.png?alt=media\&token=13ae30d4-287c-4c91-9629-d4256f6fa633)

### Logo Width (px)

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

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYiq2HoP5TDK3ZgPDPD%2F-MYiqA8_cRaDxZzADsqB%2Fimage.png?alt=media\&token=8b634782-d855-4ff8-a7df-fbae2524d32e)

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

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYe2oE7S9mdqRhBmcIy%2F-MYe4Mag4pwSl5E9OF1_%2Fimage.png?alt=media\&token=335898b6-336b-483a-8876-2622cc079986)

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

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYiVqBXHef1TZHK_nOA%2F-MYiWamMewQsWXguqiAc%2Fimage.png?alt=media\&token=04fa22a6-331e-473b-9141-e9cd2fb93f7d)

![Dealer header style](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYe90JqjQRZZy_im7jH%2F-MYe9LVW50WRP35AuimU%2Fimage.png?alt=media\&token=58a17e2b-9e07-4ca9-bfa2-eb0f4f766c56)

### **SubMenu Font Family**

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

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYe90JqjQRZZy_im7jH%2F-MYeA-VQsY7XoLAygvIy%2Fimage.png?alt=media\&token=ff1c60ff-cd97-493f-9b05-749175b3d618)

![Dealer header style](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYeAQ7jRSvG-Gz9SSLd%2F-MYeAf1vQJGbetbCPas1%2Fimage.png?alt=media\&token=e2f7e9be-5cfc-41dc-ae21-b1465f8d5f0a)

### **Margin**

Adjust the Menu section Margin options:

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYeBQq6jhcmZc6bSHF3%2F-MYeBpxxRHlJcuq5bHkt%2Fimage.png?alt=media\&token=2cccd4df-fb60-4450-b1c4-2a843073d6a3)

![Dealer header style](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYeBQq6jhcmZc6bSHF3%2F-MYeChmn09KvGwwV9vml%2Fphoto_2021-04-19%20\(5\).jpg?alt=media\&token=ed0ca04a-8b14-4548-9b62-df28b2f4b6f4)

### **‌Item Padding**

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

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYeBQq6jhcmZc6bSHF3%2F-MYeD56VgUQRt8RpMrvb%2Fimage.png?alt=media\&token=f9bd6c17-2a97-4272-a8c2-2e9a02465025)

![Dealer header style](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYeBQq6jhcmZc6bSHF3%2F-MYeEPJpg0415LwPn2-f%2Fphoto_2021-04-19%20\(6\).jpg?alt=media\&token=968b7760-5296-4607-9743-b46c2bf858ca)

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

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYhVy_hUJJanAmsih7R%2F-MYhX84B2TDNpXyjPD37%2Fimage.png?alt=media\&token=e23381f9-9724-4d2d-a42b-4c612c2e820a)

{% tabs %}
{% tab title="Dealer header styles" %}
![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYi_04NtHRvR-6e9pLf%2F-MYi_iAciQPct89Jrc9e%2Fimage.png?alt=media\&token=488ddae0-d4f9-4646-9384-5490e5fe498e)
{% endtab %}

{% tab title="Motorcycle header style" %}
![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYi_04NtHRvR-6e9pLf%2F-MYi_bq5QBWs8VS_JGNs%2Fimage.png?alt=media\&token=01c20d07-893d-4d2d-8f3b-0514ab97b27f)
{% 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 %}

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYhT46yaAl2i2iU_k4x%2F-MYhVpC7lLkYLibcn2_9%2Fimage.png?alt=media\&token=0ac84e73-df18-4b7a-85cc-564e3fdd77d4)

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

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYhVy_hUJJanAmsih7R%2F-MYhXfnf4rfs0y1cgsED%2Fimage.png?alt=media\&token=eacbd01a-6398-4c30-b994-75117d05f925)

![Dealer header style](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYhVy_hUJJanAmsih7R%2F-MYhXZNcH-ZVqWPEijps%2Fimage.png?alt=media\&token=6ef01768-089d-43e5-95d2-0b98b83a3aff)

### **Item Hover Background Color**

Indicate the menu item block hover color:

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYhVy_hUJJanAmsih7R%2F-MYhYC_bBR_36s7YAviT%2Fimage.png?alt=media\&token=33ee8c05-6fc5-474a-b752-81b43c4dbbb1)

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

{% tabs %}
{% tab title="Dealer header styles" %}
![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYi_04NtHRvR-6e9pLf%2F-MYiaKIrX1M59z713pY4%2Fimage.png?alt=media\&token=9d898312-37fa-497f-a361-e6ef44409424)
{% endtab %}

{% tab title="Motorcycle header style" %}
![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYi_04NtHRvR-6e9pLf%2F-MYiaF64KuHFXtsP0aef%2Fimage.png?alt=media\&token=91a26e5e-da7f-4abb-b838-3c82eb3c6041)
{% 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 %}

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYhVy_hUJJanAmsih7R%2F-MYhZp7qIZOb_XM2_BOu%2Fimage.png?alt=media\&token=c59326ea-9f76-44ea-811f-9e76010dff72)

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYiVqBXHef1TZHK_nOA%2F-MYiXqakftaGmGiG-NRF%2Fimage.png?alt=media\&token=085d9ca2-963f-42c0-a60b-fcb97a18843b)

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

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYhVy_hUJJanAmsih7R%2F-MYh_H9zSkdcm6cUf30Y%2Fimage.png?alt=media\&token=be1b0417-e160-4019-882e-9a9f9e68c686)

![Dealer header style](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYhVy_hUJJanAmsih7R%2F-MYha-tJBEMJHuSRcRUc%2Fimage.png?alt=media\&token=c4408f62-9456-4896-a4cc-2216f7e0bd4b)

{% hint style="info" %}
The compare page should be indicated under the [**Theme Option > Invetry Settings > Main > Compare Page** ](https://docs.stylemixthemes.com/motors-theme-documentation/inventory-settings#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 %}

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYhVy_hUJJanAmsih7R%2F-MYhbvCpORUVtVBmDDOS%2Fimage.png?alt=media\&token=6a46e8ae-b303-46ec-b980-92b331e2f09d)

![Dealer header style](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYhVy_hUJJanAmsih7R%2F-MYhbY9BO-rkE41oEN6A%2Fimage.png?alt=media\&token=d2893ef3-863f-4839-bd72-9b1f3b57be33)

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

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYhVy_hUJJanAmsih7R%2F-MYhesBE8-X1Wj3gfs29%2Fimage.png?alt=media\&token=e393c95f-0e7a-4fd7-8847-bba41d22acc8)

![Dealer header style](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYhVy_hUJJanAmsih7R%2F-MYhf5m7emq_BMEOsnX5%2Fimage.png?alt=media\&token=3aaa5e4f-d162-4ef4-a2ee-71f7269fc95e)

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

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

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYhVy_hUJJanAmsih7R%2F-MYhfTAxmVxUEo6RXKav%2Fimage.png?alt=media\&token=e459d3fb-9103-4acb-96d9-1908b541116f)

![Dealer header style](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYhVy_hUJJanAmsih7R%2F-MYhgatCbIc6p_OKmNI1%2Fimage.png?alt=media\&token=bc82bd05-d6c1-4354-aa80-5b5e09713bd7)

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

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYhVy_hUJJanAmsih7R%2F-MYhh0IxXyTsa1GTIHMg%2Fimage.png?alt=media\&token=4a9b9630-d5cd-45bf-9a11-0899ff6f9daa)

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" %}
![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYid79C47Q30vDkLACB%2F-MYidhFViNbBOrsjTZDO%2Fimage.png?alt=media\&token=73285755-d5e5-4065-bfcf-0b0b135a3a20)
{% endtab %}

{% tab title=" Classified Five header style" %}
![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYid79C47Q30vDkLACB%2F-MYidoYbphvk4X7hpP_5%2Fimage.png?alt=media\&token=1dd52c37-9338-4d1a-a2fd-58e9cc181ec1)
{% 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 %}

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYhkaIH7L9bPO3sktVy%2F-MYhoBKfZd1MVUCfveDQ%2Fimage.png?alt=media\&token=daac6cbf-eb09-44ad-a417-e1363fed626b)

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:

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYhtPga-Thgw0cSwFt8%2F-MYhukpTxPChxdBAbndX%2Fimage.png?alt=media\&token=a9b7bcf2-ba3a-4aeb-af6c-29f627e37ead)

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

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYhVy_hUJJanAmsih7R%2F-MYhjPy4zExi38idSKuz%2Fimage.png?alt=media\&token=beb1a2e0-c63f-4bd2-a8eb-ac51ba12c49d)

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. 

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYhtPga-Thgw0cSwFt8%2F-MYhy-Gkdxrqxwi2GY_z%2Fimage.png?alt=media\&token=c93e6bab-a7fb-4ae5-85b1-729152ec0ad2)

## **Socials**

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

![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MYeAQ7jRSvG-Gz9SSLd%2F-MYeB-fn4sZiX_LW542z%2Fimage.png?alt=media\&token=288f066c-700b-4a7d-8109-afcc889a8031)

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