Theme Settings is the main section of Ken, from which you can establish global settings for your website. In this article, we will describe the options available for configuring Header structure.
To access the header settings, from WordPress top bar, go to Theme Settings > Header.
Configuring Header Structure
| Setting | Description |
|---|---|
| Header Structure | This is the primary option used to define the type of header structure you want for the site. The options available are Full Screen, Standard, Margin and Vertical. |
Based on the chosen Header Structure, you will see other options. Below sections will define the other options available.
Options Similar Across Every Header Structure Type
This section defines all the options which are available for every Header Structure type.
| Setting | Description |
|---|---|
| Header Padding (Top & Bottom) | Using this option you can increase or decrease the header padding from the top and the bottom. The default value for this option is 30px. |
| Boxed Header | Enable this option to limit the header content into a box. If you want the header content to be stretched screen wide, disable this option. |
| Sticky Header | Use this option to enable or disable the sticky header. Enabling this option will make header stay at the top of the browser while scrolling down. |
| Squeeze Sticky Header | This option will give you the control on whether to squeeze the sticky header or keep it the same height as none-sticky. |
| Show Header Border Top? | Enable this option to show a border at the top of the header. |
| Show Header Border Bottom? | Enable this option to show a border at the bottom of the header. |
| Header Search Form | Enable this option to show a search form. The search form will be placed on the right side of the main navigation. |
| Header Wpml Language Selector | Enable this option to show the WPML language selector in the header. |
| Page Title : Pages | If you don’t want to show page title section (title, breadcrumb) in Pages disable this option. this option will not affect archive, search, 404, category templates as well as blog and portfolio single posts. |
| Main Navigation for Logged In User | Please choose the menu location that you would like to show as global main navigation for logged in users. You should first create a menu and then assign to menu locations. |
| Header Social Networks | This option is used to define the place of the Social icons in the header. The options available are Header Section and Header Toolbar (at the top of the main header section). You can also choose disabled in case you do not wish to show any social icons. In case, you choose to show the social icons, you will be able to see a list of the social icons at the bottom of this option. |
| Header Toolbar | Enable this option to show the Header Toolbar. |
| Show/Hide Header in Mobile Devices | Using this option you can show or hide the header on the mobile devices. Mobile devices are the devices which have smaller screen size than 767px. |
Extra Options Only Available for Full Screen Header Structure Type
Apart from the options available for all the header structure types, full screen header structure type comes in with some more options defined below.
| Setting | Description |
|---|---|
| Full Screen Overlay Mode Alignment | This option lets you align the elements in the full screen overlay mode. The options available are Left, Center and Right. |
| Full Screen Custom Logo | This option lets you choose a different logo than the global logo for full screen mode. |
| Full Screen Header Menu Typography | This option lets you configure the typography for the full screen menu items. Here you can configure the Font Family, Font Weight & Style, Text Alignment, Font Size, Line Height and Font Color. |
| Full Screen Header Overlay BG Color | This option lets you choose the background color of the full screen overlay. |
| Full Screen Header Overlay Opacity | This option lets you set the opacity of the full screen overlay. |
| Full Screen Header Overlay BG Image | This option lets you add an image for the full screen overlay. |
| Full Screen Header Link Hover Color | This option lets you choose the hover color for the full screen menu items. |
| Full Screen Header Link Background Hover Color | This option lets you choose the background hover color for the full screen menu items. |
| Full Screen Header Close Button Color | This option lets you choose the color for the full screen close icon. |
| Full Screen Header Burger Icon Color | This option lets you choose the color for the full screen burger icon. |
Extra Options Only Available for Standard Header Structure Type
Apart from the options available for all the header structure types, standard header structure type comes in with some more options defined below.
| Setting | Description |
|---|---|
| Header Location | This option lets you choose whether the header will be placed at the top of the page or at the bottom of the page. |
Extra Options Only Available for Vertical Header Structure Type
Apart from the options available for all the header structure types, vertical header structure type comes in with some more options defined below.
| Setting | Description |
|---|---|
| Vertical Header State | This option lets you choose the initial state of the vertical header. The 2 options available Expandable and Always Open. If the Expandable header is chosen, then the header will be hidden by default and by clicking the burger icon it will expand to reveal the logo and the navigation. |
| Vertical Header Align | This option lets you choose the side of the page to show the vertical header. You can either choose Right or Left. |
| Header Vertical Width? | This option lets you choose the width of the vertical header. The default value for this option is 280px. |
| Header Padding (Left-Right) | Using this option you can increase or decrease header padding from the top and the bottom. The default value for this option is 30px. |
| Vertical Header Menu Align | This option lets you align the menu inside the vertical header. The options available are Left, Center and Right. |
Extra Option Only Available for Some Header Structure Types
Finally, the below option is available for some header structure types but not for all.
| Setting | Description |
|---|---|
| Header Align | This option lets you align the elements of the header. The available optionsare Left, Center and Right. This option is available for all the header structure types except for the vertical header structure type. |
