Content

Header is probably one of the first things you will want to set up on your website. 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 Option panel. 

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

Header style

Navigate to Theme Options > Headers > Style

  1. Select Header Style: Four
  2. Sticky Menu: Enable/Disable sticky menu
  3. Mobile Sticky Menu: Enable/Disable sticky menu in mobiles
  4. Layout: choose from Boxed or Full Width layout
  5. Navigation Align: you can select navigation alignment left or right

Note: The header style 4 is needed if you want to have the transparent header in your website

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 4

Menu colors

  1. Background Color: Select Color.
  2. Links color: Select Color.
  3. Links Hover color: Select Color.

Sub menu 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 border line 
  6. Button Border Hover Color: Select Color (or Transparent)

Transparent header colors

Note: The header style 4 is needed if you want to have the transparent header in your website

Menu colors

  1. Transparent Links color: Select Color.
  2. Transparent Links Hover color: Select Color.
  3. Button Border: customize button border line 
  4. Button Border Hover 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 border line 
  6. Button Border Hover Color: Select Color (or Transparent)

Header typography

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

Was this article helpful to you?

Comments are closed.