Header Specific Elements
As said above, you can add any content elements available in page builder to your header template. Here we will describe briefly header specific elements.
In This Article
With this element you can add а menu to your header which you have created in Appearance – Menus :
select the menu to be displayed from the list of menus you have created in Appearance – Menus
Different Source for Mobile
if enabled you can then choose another menu to be displayed on mobile devices
you can choose which menu layout to use for the added menu element. For desktop you can choose between horizontal menu, hamburger menu, overlay menu or logo split menu layout. For tablet you can specify whether to use the same layout as chosen for desktop or the layout selected for mobile menus (in this case the menu will be automatically changed to hamburger icon).
Content for Offcanvas Area (Desktop)
in case of selecting “Hamburger” or “Overlay” as “Layout Desktop”, here you can select the content source for the offcanvas bar (“Hamburger” layout) / offcanvas overlay (“Overlay” layout). By default the menu selected in “Menu Source” will be used. However you can select “Section Template” to be used instead of menu. Check this article for more details on section templates
select the menu layout for mobile menus
with this setting you can stretch the horizontal menu on different devices.
specify the spacing between the main menu items and dropdown with submenus
enable/disable submenu indicator for your first level in menu
by default all color and typography styles for menu are inherit from theme options. Additionally there are two color presets – light and dark. All this styles can be then customize in “Style” tab (Elementor) / “Appearance” tab (WPBakery).
This element is similar to Menu element – it helps to add a menu to your header. However, this secondary menu has another design and is aimed to display some additional “secondary” menu (in addition to the main menu).
It adds your website logo specified in Theme Options. You can specify which kind of logo to use for desktop and for mobile header. Learn more about logo settings
This element adds a cart icon (with mini-cart dropdown) to your header. This works only in case WooCommerce plugin is installed. You can manage the cart icon and label colors in Theme Options – WooCommerce – Cart & Checkout
This element adds a wishlist icon to your header. It works only in case YITH Wishlist plugin has been installed
This element adds a “My Account” icon to your header. Here you can select an icon and specify the link where this icon should link. By default it is linked with default WooCommerce My Account page.
It helps to add a search icon / button to your header with optional AJAX live search. All settings are described in details here
This element adds the search form to your website’s header. It is like a search icon: here you can optionally enable AJAX live search, specify the post types for search etc.
Adds a vertical (or horizintal) separator line. This element is useful for separating different elements inside one header row / section.
Infotext (WPBakery) / Infobox (Elementor)
With this element you can quickly add an information text with an icon, for example phone number or opening hours. For quick editing this element includes a number of presets, which can be selected in Preset select box.
This elements adds a set of social icons linked to your social profiles to your header.
You can specify the links to your social profiles in Theme Options – Contacts & Socials
In the repeater control of the Social Icons element you can then enable the social icons you wish to add and specify custom links to the social profiles
To add social icons to your header use the default Social Icons widget of Elementor
In the Shape control you can select the shape preset for social icons. And in the Size preset you can quickly select the predefined icon size for the social icons.
This element adds a language switcher to your header. It works only in case WPML Multilingual plugin is installed on your website. For WPML installation instructions please check this chapter
This header element helps you to add currency switcher to your website. It works basing on WooCommerce Multilingual plugin (part of WPML). You can find all detailed steps on configuring currencies for your website in this documentation.