Header Options

In this section, you’ll be able to style the headers for your the site. You can set the color schemes, positioning, visible elements, etc for each header style.

Header main options

Select the main options for the header on your site.

Top inner page settings

• Top inner page – select any custom page as the top inner page ( you’ll see the kebab button in header which will activate top inner page on click, check the example here). Note, you have to be sure, that the top inner page and the main page are not the same to avoid conflicts and errors on the page. The top inner page can also be enabled or disabled in each page editor.
  • Top inner page appear effect – select the appear animation effect for the top inner page on your site.
  • Top inner page background color – set the background color for the top panel inner page.
  • Close button color – choose the color for the close button set inside top inner page.

Header main settings

• Boxed header layout – switch it to Enable if you want to have boxed header for your site.
• Primary navigation alignment – select the header navigation position in header. Right, left and center alignment positions are available.
• WPML language switcher – switch it to Enable to have the WPML language switcher in header. WPML plugin is required.
• Language selection shortcode – enter the language shortcode provided by the translating plugin.
• Top address panel – enter the contact information in this field which will be displayed in top panel of your header.
• Top menu height – set the height of the top menu in px. The maximum value is 150px.

Menu hover colors

In this section, you can style the hover settings for the menu item on your site.

• Menu dropdown hover color – set the text hover color for the menu items on your site.
• Menu dropdown background color – select the background color for the menu dropdown.

Sticky header options

Customize sticky header style for your site using Sticky header options.

Sticky header main options

• Sticky header – switch it to Enable if you want to have sticky header for your site which appears when you scroll down the page.
• Sticky header animation – select the animation for sticky header, it is the way it appears when you start scrolling down. Simple, Slide up and Fade options are available.

Sticky Header color options

• Sticky Header background color – select the background color for sticky header.
• Sticky header delimiter color – set the delimiter color for the sticky header. The delimiter will be visible between the menu and icons.
• Sticky header text color – set the color for the menu items in sticky header.
• Logo for sticky header – upload the logo image which will be displayed in sticky header on your site.
• Retina logo for sticky header – select an image from the media library and upload it as logotype for sticky header for retina devices.

Custom header options

Create unique displaying of custom header for your site using this options section.

Custom header is the area with the page title, subtitle and breadcrumbs in it. Custom header is located in the top header section of the page.

These settings can be overwritten with the ones made in each post type editor Custom header options section.

Custom header main options

• Custom header – switch it to Enable if you want to have Custom header on your site.
• Full window height – set it to Enable to have the custom header set to full height.
• Custom header min height – set the minimum height for the custom header. The maximum value is 900px.

Custom header background options

• Default background color – select the background color for the custom header, which will be shown if the image is not set for the custom header.
• Default background image – upload the background image for custom header.
• Default background position – set the position of the image selected for custom header.
• Default background size – allows adjusting the background image displaying. You can select one of the following values: cover, contain and initial.
• Background attachment – sets the background image attachment style:
  • Scroll – background image scrolls with the content.
  • Fixed – the background image is fixed and content scrolls over it.
  • Initial – the background image and content will be fixed.
• Background repeat – select whether the custom header background image will be repeated or not repeated. You can select horizontal repeat, vertical repeat or disable repeat of the image.
• Dark background – set it to Enable if you’ve set dark background color. The text color will be changed to make it more readable.

Custom header content options

• Custom header text alignment – align the text horizontally in custom header. Right, left and center alignment positions are available.
• Custom header parallax effect – switch it to Enable if you want to have parallax effect for custom header.
• Custom header title – allows you to enable or disable the title of the page in the custom header.
• Custom header subtitle – allows you to enable or disable the subtitle of the page in the custom header.
• Custom header breadcrumbs – allows you to enable or disable the breadcrumbs of the page in the custom header.

Mobile header options

This options section allows you to style the mobile header on the site.

Mobile header color settings

• Header background color – choose the background color for the mobile header.
• Header elements color – select the text color for the elements set in the mobile header.
• Header border color – set the border color for the mobile header.
• Menu background color – select the background color for the opened (active) mobile header.
• Menu delimiter color – choose the delimiter color for the opened(active) mobile header.
• Third level menu background color – allows you to set the background color for the third level menu.

Mobile header elements settings

• Social icons – enable or disable the social icons in the mobile header. The social icons can be set in Theme options Social accounts Social networks section.
• Language switcher – set it to Enable to have the language switcher in the mobile header.
• Shopping cart button – allows you to enable or disable the cart button in header for mobile devices. Woocommerce plugin is required to be installed and activated.
• Search form – enable or disable the search form in the mobile header.
• Logo for mobile devices – upload an image from the media library and upload it as mobile header logotype.
• Retina logo for mobile devices – select an image from the media library and upload it as mobile header logotype.

Side area options

This section allows you to style the side section available on click in the header. You can place here widgets for extra information.

• Side area by default – switch it to Enable to activate Side Area by default for your site. It can also be enable or disabled for each page in singe page editor.
• Background color – select the background color for the side area on your site.
• Background image – upload the image from the media library to set it as the side area background.
• Background position – choose the position for the background image in side area.
• Background repeat –  allows you to choose the repeat for the background image. You can select horizontal repeat, vertical repeat or disable repeat of the image.
• Background size – adjust the background image displaying. You can select one of the following values: cover, contain and initial.
• Dark background – switch it to Enable if you’ve set dark background color. The text color will be changed to make the text more readable.