Fig. 1. Header layouts.<\/p>\n<\/div>\n

You can find some examples below (fig. 2.1 \u2013 2.3):<\/p>\n

Fig. 2.1. Classic header.<\/p>\n<\/div>\n

Fig. 2.2. Inline header.<\/p>\n<\/div>\n

Fig. 2.3. Split header.<\/p>\n<\/div>\n

Header layout affects number and position of areas where you can place microwidgets (top bar right, top bar left, etc.).<\/p>\n

You can also fine-tune elements alignment in this tab (fig. 2.4):<\/p>\n

Fig. 2.4. Header paddings and alignment.<\/p>\n<\/div>\n

Microwidgets<\/h2>\n
You can enable so called Microwidgets<\/strong> (icons like \u201cCart\u201d, \u201cWorking hours\u201d, \u201cSearch\u201d, etc.) and drag and drop them to the topbar and other available location based on the header layout you have selected (fig. 3.1):<\/p>\n
$\"Fig.$ <\/a><\/p>\n
Fig. 3.1. Microwidgets.<\/p>\n<\/div>\n
To edit Microwidget content just click on the \u201cpencil\u201d icon (fig. 3.1).\u00a0When editing a specific micro widget, you can configure the visibility of a widget for different devices, assign an icon, select colors, etc. (fig. 3.2):<\/p>\n
$\"Fig.$ <\/a><\/p>\n
Fig. 3.2. Edit microwidget<\/p>\n<\/div>\n
The following\u00a0Microwidget elements are available:<\/p>\n
\n
nine \u201cMultipurpose\u201d widgets with text and icons (for example, address, phone, email);<\/li>\n
five text areas;<\/li>\n
two buttons;<\/li>\n
two menus;<\/li>\n
login;<\/li>\n
social icons;<\/li>\n
search;<\/li>\n
cart (when WooCommerce plugin is activated);<\/li>\n
language switcher (if WPML plugin is active).<\/li>\n<\/ul>\n
You can specify font family, size and color for specific microwidget area (fig. 3.3):<\/p>\n
$\"Fig.$ <\/a><\/p>\n
Fig. 3.3. Configure appearance of microwidgets.<\/p>\n<\/div>\n
Top Bar<\/h2>\n
In the Top Bar tab (fig. 4), you can specify:<\/p>\n
\n
height and paddings;<\/li>\n
background colour or image;<\/li>\n
background style: content-width line, full-width line, disabled.<\/li>\n<\/ul>\n
$\"Fig.$ <\/a><\/p>\n
Fig. 4. Top bar settings.<\/p>\n<\/div>\n
Header<\/h2>\n
It is possible to specify the following settings in Header tab (fig. 5):<\/p>\n
$\"Fig.$ <\/a><\/p>\n
Fig. 5. Header settings.<\/p>\n<\/div>\n
\n
background color or image;<\/li>\n
header decoration (shadow, line);<\/li>\n
menu background for \u201cClassic\u201d header and other layout-related settings.<\/li>\n<\/ul>\n
Menu<\/h2>\n
It is possible to specify the following settings in Menu\u00a0tab (fig. 6.1):<\/p>\n
$\"Fig.$ <\/a><\/p>\n
Fig. 6.1. Menu settings.<\/p>\n<\/div>\n
\n
main menu font family, font size, colors;<\/li>\n
hover and active menu items style;<\/li>\n
enable\/disable next level indicator icons;<\/li>\n
specify menu items margins & paddings;<\/li>\n
enable (fig. 6.2) or disable (fig. 6.3) full height & full width links:\n
$\"Fig.$ <\/a><\/p>\n
Fig. 6.2. Enabled full-width links.<\/p>\n<\/div>\n
$\"Fig.$ <\/a><\/p>\n
Fig. 6.3. Disabled full-width links.<\/p>\n<\/div>\n<\/li>\n
enable or disable dividers between menu items;<\/li>\n
decoration styles for horizontal headers (color outline or background for hovers, animation, border radius, etc.).<\/li>\n<\/ul>\n
Submenu<\/h2>\n
It is possible to specify the following settings in Submenu\u00a0tab (fig. 7):<\/p>\n
$\"Fig.$ <\/a><\/p>\n
Fig. 7. Submenu settings.<\/p>\n<\/div>\n
\n
dropdown menu\u00a0background color;<\/li>\n
dropdown menu width and padding;<\/li>\n
menu items font family, size, color;<\/li>\n
hover and active menu items style;<\/li>\n
specify menu items margins & paddings;<\/li>\n
select sideways or downwards layout if you use side navigation.<\/li>\n<\/ul>\n
\u00a0You can also find Mega Menu<\/a> settings there.<\/div>\n
Floating header<\/h2>\n
$\"Fig.$ <\/a><\/p>\n
Fig. 8. Floating header settings.<\/p>\n<\/div>\n
In the Floating header tab (fig. 8), you can specify:<\/p>\n
\n
if this header should be enabled;<\/li>\n
floating header height, color and decoration (shadow, line, disabled);<\/li>\n
effect: Fade on scroll,\u00a0Slide on scroll,\u00a0Sticky;<\/li>\n
font colors for idle, hover and active states;<\/li>\n<\/ul>\n
It is also possible to enable Floating top bar<\/strong> (include the topbar in the floating header) there.<\/p>\n
Mobile header<\/h2>\n
This tab allows you to specify:<\/p>\n
\n
first header switch point (for tablets) and second header switch point (for phones);<\/li>\n
header height and layout for tablets and phones (fig. 9.1):\n
$\"Fig.$ <\/a><\/p>\n
Fig. 9.1. Mobile header layouts.<\/p>\n<\/div>\n<\/li>\n
mobile header background color, icons size and colors;<\/li>\n
enable or disable floating mobile navigation;<\/li>\n
specify font family, size and colors (including hover\/active menu items);<\/li>\n
color of website overlay when mobile menu is open;<\/li>\n
mobile menu background and alignment (fig. 9.2): $\"Fig.$ <\/a><\/li>\n
\u201cOpen\u201d button design (fig. 9.3): icon, position, paddings\/margins, border, color.\n
$Fig. 9.3. \"Open\" button design.$ <\/a><\/p>\n
Fig. 9.3. \u201cOpen\u201d button design.<\/p>\n<\/div>\n
Mobile menu<\/h2>\n<\/li>\n<\/ul>\n
It is possible to specify the following settings in Mobile Menu tab:<\/p>\n
\n
mobile menu items font family, size, color;<\/li>\n
menu dividers;<\/li>\n
menu width, paddings, background color, left\/right position;<\/li>\n
site overlay (on mobile menu opening)\u00a0colors;<\/li>\n
\u201cClose\u201d button design (fig. 10.1): icon, position, paddings\/margins, border, color.\n
$Fig. 10.1. \"Close\" button design.$ <\/a><\/p>\n
Fig. 10.1. \u201cClose\u201d button design.<\/p>\n<\/div>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
Layout There are seven header layouts available in The7\u00a0 (fig. 1): Fig. 1. Header layouts. You can find some examples below (fig. 2.1 \u2013 2.3): Fig. 2.1. Classic header. Fig. 2.2. Inline header. Fig. 2.3. Split header. Header layout affects number and position of areas where you can place microwidgets (top bar right, top bar…<\/p>\n","protected":false},"author":2,"featured_media":1959,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[10,9],"tags":[],"class_list":["post-1900","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-theme-options","category-user-guide","category-10","category-9","description-off"],"acf":[],"_links":{"self":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/1900","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/comments?post=1900"}],"version-history":[{"count":3,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/1900\/revisions"}],"predecessor-version":[{"id":2566,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/1900\/revisions\/2566"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/media\/1959"}],"wp:attachment":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/media?parent=1900"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/categories?post=1900"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/tags?post=1900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}