Main Header
Last updated
Last updated
The main tab contains all the options related to the header.
In this section, you can choose one of the header styles.
There are 12 header styles available. Let's have a look at them:
This option shows additional settings for Main Header. When the option is disabled after making changes, settings will still be applied.
Header Background - The background color of the Main header that will be applied when the Transparent header is disabled.
Header Shadow - The background color of the line that will be displayed below the Main Header.
Sticky Header - When this option is enabled, the header will be positioned above the blocks and always stay on top of the screen when scrolling:
The Header option will be applied on desktop devices only.
Full width - The header spans from right to left and takes the full 100% of the screen's width:
Transparent Header - When this option is enabled, the header will be positioned absolutely above the blocks with transparent color:
Show on mobile - Option to show the button on the mobile devices.
Additional Customization - This option shows additional settings for WooCommerce Cart Icon. When it is enabled typography and font colors can be customized:
Note: The Language Switcher option will work only if the WPML Multilingual Plugin is installed.
You can enable the Language Switcher option if you are going to create a multilingual website.
Show on mobile option can be enabled to show the WPML switcher on the mobile devices.
Switcher Style - It is possible to use the default settings of the WPML custom Language switcher or use Theme styles. When WPML is selected Additional setting below will not be available.
Additional Customization - This option shows additional settings for WPML Language switcher. When it is enabled typography and font colors can be customized. When the option is disabled after making changes, settings will still be applied:
Enable Socials option adds social network buttons to the main menu:
Show on mobile option shows the buttons on the mobile devices:
Additional Customization - This option shows additional settings for Social Icons. When the option is disabled after making changes, settings will still be applied.
Enable Search option adds the search button to the main menu:
Show on mobile option can be enabled to show the Search icon on the mobile devices.
Additional Customization - This option shows additional settings for Search such as font color and typography settings:
Mobile Header Breakpoint option allows to define from which resolution start the mobile menu displaying.
Max width for Landscape resolution is 1024px
Enable Contact Information option to add address, phone number and working hours to the main menu. Here you can pick the relevant icons, specify colors and sizes.
Show on mobile option can be enabled to show the Contact information n on the mobile devices:
Button - By enabling the option call to action button can be added to the header.
Button Text- Label for call to action button.
Button Link - Link for redirection when the call to action button is clicked.
Open in New Window - When this option is enabled the button link will be opened in new Browser tab.
Link Follow - When the the option is disabled prohibits indexing links by search engine bots.
Address Icon - An icon that displays before the Button text.
Additional Customization - This option shows additional settings for Search such as font color and typography settings:
Show on mobile option can be enabled to show the Call to action button on the mobile devices:
Enter the Copyright if you want to display it.
The Copyright section will be displayed only on the Header Style 10, 11, 12.
In order to get the transparency effect, it is required to set the background color to transparent in the section.
Display the WooCommerce Cart on the header by enabling the WooCommerce Cart option. The cart requires the to be installed and set up.
The plugin is not included in the theme package due to licensing restrictions.
The editor for Address, Working Hours and Phone number fields support HTML tags which are useful for structuring and creating content. Example for phone number filed to make it clickable:
