The header is probably one of the first things you will want to set up on your website. The header consists of a series of elements such as logo, navigation menu, social icons and contact information. All these elements, such as colors, fonts, images, etc. can be customized by the Theme Options panel. 

Below is an example of how you can setup the Header Style 3.

Header style

Navigate to Theme Options > Headers > Style

  1. Select Header Style: Three
  2. Sticky Menu: Enable/Disable sticky menu
  3. Mobile Sticky Menu: Enable/Disable sticky menu in mobiles

Call us

  1. Enable/Disable call us in the header
  2. Upload image: Upload an image that you want to display in the header top right corner (Recommended image size 85 x 85 px).
  3. Text: Add a text to your choice like Call Us:
  4. Phone Number: Add your phone number

Styling header colors

Before to customize header colors is important that you know which header style your website is using. If you don’t know which is one, navigate to Theme Options > Headers > Style to check the header style has been selected.

To customize header colors navigate to Theme Options > Styling > Headers and Select Header Type Header 3

Menu colors

  1. Background Color (Choose Background Color For Top Area): Select Color.
  2. Background Color (Choose Background Color For Menu Area): Select Color.
  3. Links color: Select Color
  4. Links Hover color: Select Color
  5. Links Hover Background color: Select Color
  6. Border color: Select Color

Submenu dropdown colors

  1. Background Color: Select Color
  2. Links color: Select Color
  3. Links Hover color: Select Color (or Transparent)
  4. Border color: Select Color (or Transparent)

Create listing button colors

  1. Button Text color: Select Color
  2. Button Text Hover color: Select Color
  3. Button Color: Select Color
  4. Button Hover Color: Select Color
  5. Button Border: customize button borderline 
  6. Button Border Hover Color: Select Color (or Transparent)

Call us colors

  1. Text color: Select Color
  2. Background color: Select Color

Header typography

To customize the header typography Navigate to Theme Options > Typography and use the font options available in the Headers box.

Was this article helpful to you?