Content

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

Header style

Navigate to Theme Options > Headers > Style

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

Contact info

  1. Enable/Disable Contact Info: you can select choose if you want to display or not the contact info
  2. Contact Info Icon: You can select an icon form the Font Awesome v.4.7 Icon library you just need to add icon code as in the default example <i class=”fa fa-phone”></i>
  3. Phone Number: Add your phone number
  4. Email Address: add your email address

Address

  1. Enable/Disable Address: you can select choose if you want to display or not the address info
  2. Address Icon: You can select an icon form the Font Awesome v.4.7 Icon library you just need to add icon code as in the default example <i class=”fa fa-map-marker”></i>
  3. Line 1: Add your address line 1
  4. Line 2: Add your address line 2

Office timing

  1. Enable/Disable Office Timing: you can select choose if you want to display or not the office timing info
  2. Icon: You can select an icon form the Font Awesome v.4.7 Icon library you just need to add icon code as in the default example <i class=”fa fa-clock-o”></i>
  3. Opening Hours: Add your office hours
  4. Opening Days: Add your office days

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 2

Header top area

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

Menu colors

  1. Menu Background Color: Select Color.
  2. Links color: Select Color
  3. Links Hover color: Select Color
  4. Links Hover Background color: Select Color
  5. 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)

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?

Comments are closed.