To customize Header go to Appearance > Theme Options > Header and you will find the following options.

Header Layout

Select header layout you desire from available headers. Also there is a “No Header” option which is useful if you are building a coming soon or landing page. beside selecting a header layout for the entire website from here you still can select a different header for each page of your website, Check the following page for more info.

Note: you can Select the slider position below or above the header. This will not be effective on vertical headers.

Logo Settings

Logo Image

Add your own custom logo image by selecting it and clicking the Upload Image button.

Logo Image (Retina Version @2x)

Choose the logo image file for the retina version of the logo. It should be 2x the size of main logo.

Normal Logo Dimensions for Retina Logo

If retina logo is uploaded, Enter the normal logo (1x) version width and height. Do not enter the retina logo width or height.

Logo Spacing

Change the logo top, bottom, left and right spacing if you need.

Header Settings

Display Search Icon

Turn on or off Search icon.

Search Field Background color

Select search field background color. The default value of this option is B3 value in Smart Skin it’s better to manage your website color scheme from smart skin for faster results with less effort, however if you don’t want to use the Smart Skin value you can override it from here.

Display Shopping Cart Icon

If you are planning to activate WooCommerce plugin you will need to display shopping cart icon otherwise turn it off.

Header Background

Select header background image or color. This option is applicable for all headers on homepage and inner pages.However it is used differently according to the used header.

The default value of this option is B3 value in Smart Skin it’s better to manage your website color scheme from smart skin for faster results with less effort, however if you don’t want to use the Smart Skin value you can override it from here.

For Headers 1, 2, 3, 4, 5 and 6: The background goes behind the entire header area including the logo and main menu on both homepage and inner pages.

For Headers 7, 8, and 9: the background also goes behind the entire header area including the logo and main menu on both homepage and inner pages but in case you added a slider (Revolution or Layer Slider) from page options to this page the header will automatically overlays the slider and this header background will not be visible in this page.

Main Menu & Logo Container Style for Headers 8 and 9

You can make this container boxed or wide using this option. Applicable only on headers mentioned above.

Main Menu & Logo Container Background for Headers 8 and 9

Select container background image or color.

The default value of this option is B3 value in Smart Skin it’s better to manage your website color scheme from smart skin for faster results with less effort, however if you don’t want to use the Smart Skin value you can override it from here.

Main Menu & Logo Container Spacing for Headers 7, 8 and 9

Select the design top and bottom spacing. Applicable for the headers mentioned above

 Display Slider Shadow

Turn slider shadow on or off.

Main Menu Settings

Main Menu Typography

Select Main menu links font, color and other properties. If you need to use a Google or Custom font set it up first on Fonts Manager. The default color value of this option is T1 value in Smart Skin it’s better to manage your website color scheme from smart skin for faster results with less effort, however if you don’t want to use the Smart Skin value you can override it from here.

Main Menu Color Options

Text Hover Color: Select the desired color for text hover. The default color value of this option is Primary Color value in Smart Skin it’s better to manage your website color scheme from smart skin for faster results with less effort, however if you don’t want to use the Smart Skin value you can override it from here.

Separator Color: Select the desired color for separator between main menu items. The default color value of this option is an automatically generated lighter tint of T2 Color value in Smart Skin it’s better to manage your website color scheme from smart skin for faster results with less effort, however if you don’t want to use the Smart Skin value you can override it from here.

Main Menu Background (For Headers 4, 5, and 6)

Select main menu background background image or color. Can be used for headers mentioned above only.

Main Menu Separator

Turn main menu separator on or off.

Main Menu Sub levels Typography

Select Main menu sub levels links font, color and other properties. If you need to use a Google or Custom font set it up first on Fonts Manager. The default color value of this option is T1 value in Smart Skin it’s better to manage your website color scheme from smart skin for faster results with less effort, however if you don’t want to use the Smart Skin value you can override it from here.

Main Menu Sub levels Color Options

Background: Select the desired color for sub menu background. The default color value of this option is an automatically generated lighter tint of B1 Color value in Smart Skin it’s better to manage your website color scheme from smart skin for faster results with less effort, however if you don’t want to use the Smart Skin value you can override it from here.

Text Hover Color: Select the desired color for text hover. The default color value of this option is Primary Color value in Smart Skin it’s better to manage your website color scheme from smart skin for faster results with less effort, however if you don’t want to use the Smart Skin value you can override it from here.

Separator Color: Select the desired color for separator between main menu items. The default color value of this option is an automatically generated lighter tint of T2 Color value in Smart Skin it’s better to manage your website color scheme from smart skin for faster results with less effort, however if you don’t want to use the Smart Skin value you can override it from here.

Main Submenu Width

Add the desired width in pixel or percentage unit.

Sticky Header Settings

Enable Sticky Header

Turn fixed header while scrolling on or off

Sticky Header Background

Select the desired color or image for sticky header background. The default color value of this option is B3 Color value in Smart Skin it’s better to manage your website color scheme from smart skin for faster results with less effort, however if you don’t want to use the Smart Skin value you can override it from here.

Sticky Logo Image

By default the theme uses the logo image you entered in logo settings above but if you want a different logo version for sticky header you can add it from here.

Sticky Menu Color Options

Text Color: Select the desired color for text. The default color value of this option is T1 value in Smart Skin it’s better to manage your website color scheme from smart skin for faster results with less effort, however if you don’t want to use the Smart Skin value you can override it from here.

Text Hover: Select the desired color for text hover. The default color value of this option is Primary Color value in Smart Skin it’s better to manage your website color scheme from smart skin for faster results with less effort, however if you don’t want to use the Smart Skin value you can override it from here.

Separator Color: Select the desired color for separator between main menu items. The default color value of this option is an automatically generated lighter tint of T2 Color value in Smart Skin it’s better to manage your website color scheme from smart skin for faster results with less effort, however if you don’t want to use the Smart Skin value you can override it from here.

Sticky Menu Sublevels Color Options

Background: Select the desired color for sub menu background. The default color value of this option is an automatically generated lighter tint of B1 Color value in Smart Skin it’s better to manage your website color scheme from smart skin for faster results with less effort, however if you don’t want to use the Smart Skin value you can override it from here.

Text Color: Select the desired color for text. The default color value of this option is T1 value in Smart Skin it’s better to manage your website color scheme from smart skin for faster results with less effort, however if you don’t want to use the Smart Skin value you can override it from here.

Text Hover Color: Select the desired color for text hover. The default color value of this option is Primary Color value in Smart Skin it’s better to manage your website color scheme from smart skin for faster results with less effort, however if you don’t want to use the Smart Skin value you can override it from here.

Divider Color: Select the desired color for separator between main menu items. The default color value of this option is an automatically generated lighter tint of T2 Color value in Smart Skin it’s better to manage your website color scheme from smart skin for faster results with less effort, however if you don’t want to use the Smart Skin value you can override it from here.

Sticky Header Border Bottom Color

Select the desired color for separator between main menu items. The default color value of this option is an automatically generated lighter tint of T2 Color value in Smart Skin it’s better to manage your website color scheme from smart skin for faster results with less effort, however if you don’t want to use the Smart Skin value you can override it from here.

Sticky Header Shadow

Turn skticky header shadow on or off

Top Header Settings

Top header is visible only on header layouts: 1, 2, 4, 5, 6, 7, 8 and 9.

Top Header Background

Select the desired color or image for top header background. The default color value of this option is FB Color value in Smart Skin it’s better to manage your website color scheme from smart skin for faster results with less effort, however if you don’t want to use the Smart Skin value you can override it from here.

Top Header Border Color

Works for headers 1, 2, 4, 5, and 6. Select the desired color or image for top header border color. The default color value of this option is the Primary Color value in Smart Skin it’s better to manage your website color scheme from smart skin for faster results with less effort, however if you don’t want to use the Smart Skin value you can override it from here.

Header Phone Number

Add your phone number here if you want it to appear on header.

Header Email Addess

Add your email address here if you want it to appear on header.

Contact Details Typography

Select contact details font, color and other properties. If you need to use a Google or Custom font set it up first on Fonts Manager. The default color value of this option is FT value in Smart Skin it’s better to manage your website color scheme from smart skin for faster results with less effort, however if you don’t want to use the Smart Skin value you can override it from here.

Top Header Social Icons Color

Icon Color: Select the desired color for top icons. The default color value of this option is FT value in Smart Skin it’s better to manage your website color scheme from smart skin for faster results with less effort, however if you don’t want to use the Smart Skin value you can override it from here.

Icon Hover Color: Select the desired color for top icons hover. The default color value of this option is Primary Color value in Smart Skin it’s better to manage your website color scheme from smart skin for faster results with less effort, however if you don’t want to use the Smart Skin value you can override it from here.

Top Menu Typography

Works for header 5 only. Select top menu font, color and other properties. If you need to use a Google or Custom font set it up first on Fonts Manager. The default color value of this option is T1 value in Smart Skin it’s better to manage your website color scheme from smart skin for faster results with less effort, however if you don’t want to use the Smart Skin value you can override it from here.

Top Menu Color Options

Text Hover Color: Select the desired color for separator between main menu items. The default color value of this option is Primary Color value in Smart Skin it’s better to manage your website color scheme from smart skin for faster results with less effort, however if you don’t want to use the Smart Skin value you can override it from here.

Separator Color: Select the desired color for separator between main menu items. The default color value of this option is T2 Color value in Smart Skin it’s better to manage your website color scheme from smart skin for faster results with less effort, however if you don’t want to use the Smart Skin value you can override it from here.

Top Menu Separator

Switch top menu separator option on or off.

Top Menu Sub levels Typography

Select Main menu sub levels links font, color and other properties. If you need to use a Google or Custom font set it up first on Fonts Manager. The default color value of this option is T2 value in Smart Skin it’s better to manage your website color scheme from smart skin for faster results with less effort, however if you don’t want to use the Smart Skin value you can override it from here.

Top Menu Sub levels Color Options

Background: Select the desired color for sub menu background. The default color value of this option is FB value in Smart Skin it’s better to manage your website color scheme from smart skin for faster results with less effort, however if you don’t want to use the Smart Skin value you can override it from here.

Text Hover Color: Select the desired color for text hover. The default color value of this option is Primary Color value in Smart Skin it’s better to manage your website color scheme from smart skin for faster results with less effort, however if you don’t want to use the Smart Skin value you can override it from here.

Separator Color: Select the desired color for separator between main menu items. The default color value of this option is FT Color value in Smart Skin it’s better to manage your website color scheme from smart skin for faster results with less effort, however if you don’t want to use the Smart Skin value you can override it from here.