The header is a site area at the top of every page. You can customize and create multiple headers to use them on different pages.

Creating Headers #

Header Builder #

The header builder is a drag-and-drop constructor that allows you to customize the content and layout of the header.

Header Areas #

The header consists of three rows called "areas":

  • Top Area.
  • Main Area.
  • Bottom Area.

Each area has "Left," "Center," and "Right" cells for the elements.

Every area has its settings for height and colors. The "Top Area" and "Bottom Area" are optional. You can hide them by deactivating the "Show Area" switch in the side panel with settings.

The "Hidden Elements" area allows hiding elements for a particular header state. Drag and drop the element to the "Hidden Elements" area to hide it for a specific device (desktop/laptop/tablet/mobile).

Header States #

The header state refers to a device-specific header layout and a composition of its elements. 

The header has four states: 

  • Desktops.
  • Laptops.
  • Tablets.
  • Mobiles.

By default, the screen width breakpoints defining which header state to apply are bound to the screen width settings at Theme Options > Site Layout.

You can override these global breakpoints for the header by using the Custom Breakpoint setting for each state.

You can customize the element layout, hide/show areas and separate elements, pick the header orientation, and apply sticky and transparent behavior for each header state.

The position of header elements and Header Settings are independent in different header states. When you change them on any header state, this doesn't affect other states. 

The content and element settings NEVER DIFFER on different header states. When you change element settings on any header state, these changes apply to all states.

Header Elements #

Click on a "Plus" icon to add header elements:

  • Horizontal Wrapper
  • Vertical Wrapper
  • Text
  • Image
  • Menu
  • Simple Menu 
  • Search 
  • Dropdown 
  • Social Links 
  • Button 
  • Custom HTML 
  • Popup 
  • Cart 

Header Templates #

You can use one of the pre-designed header templates by pressing the Templates button.

Click the preview to import a header template:

When you use the header template, it removes all the elements and settings added earlier.

Header Export/Import #

You can export/import any header with all its elements and settings. This option can be useful to transfer headers between the sites.

Press the Export/Import button, copy/paste the code into the text area, and click the Import Header button.

The import process removes all the elements and settings added to the header earlier. 

Assigning Headers #

You can assign headers:

  • Globally, for post types and archives. Use relevant settings at Theme Options > Pages Layout, Theme Options > Archives, and Theme Options > Shop.
  • To the posts of specific taxonomy. Open taxonomy settings and specify the header for archives (Archives Layout) and posts (Pages Layout).
  • To individual posts/pages. Use the Page Layout settings to specify the relevant header.

Creating a separate header is unnecessary if you only need to change the header's sticky or transparent behavior for individual page(s). In the Page Layout settings, you can pick the main header and override its sticky and transparent properties for the current page.