{"id":278,"date":"2019-01-24T10:47:04","date_gmt":"2019-01-24T10:47:04","guid":{"rendered":"https:\/\/exponentwptheme.com\/documentation\/?page_id=278"},"modified":"2019-01-26T09:48:54","modified_gmt":"2019-01-26T09:48:54","slug":"header-modules","status":"publish","type":"page","link":"https:\/\/exponentwptheme.com\/documentation\/overview-header-builder\/header-modules\/","title":{"rendered":"Header Modules"},"content":{"rendered":"<div  class=\"tatsu-fzhyskgwq6b9htjw tatsu-section    tatsu-clearfix\" data-title=\"\"  data-headerscheme=\"background--dark\"><div class='tatsu-section-pad clearfix' data-padding='{\"d\":\"90px 0px 90px 0px\"}' data-padding-top='90px'><div class=\"tatsu-row-wrap  tatsu-wrap tatsu-row-has-two-cols tatsu-medium-gutter tatsu-reg-cols  tatsu-clearfix tatsu-fzhyskgwt43reec4\" ><div  class=\"tatsu-row \" ><div  class=\"tatsu-column  tatsu-column-no-bg tatsu-one-fourth tatsu-column-image-none tatsu-column-effect-none  tatsu-fzhyskgwwi7kgw63\" data-animation=\"fadeIn\"   data-parallax-speed=\"0\" style=\"\"><div class=\"tatsu-column-inner \" ><div class=\"tatsu-column-pad-wrap\"><div class=\"tatsu-column-pad\" ><div  class=\"tatsu-module tatsu-sidebar tatsu-fzhyskgwxo4jqc4p   \" data-animation=\"fadeIn\"   ><div class=\"widget_nav_menu widget\"><h6>Related Articles<\/h6><div class=\"menu-header-builder-container\"><ul id=\"menu-header-builder\" class=\"menu\"><li id=\"menu-item-283\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-283\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/overview-header-builder\/header-builder-introduction\/\" title=\"Header Builder Overview\">Header Builder Overview<\/a><\/li>\n<li id=\"menu-item-282\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-282\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/overview-header-builder\/building-blocks\/\" title=\"Header Building Blocks\">Header Building Blocks<\/a><\/li>\n<li id=\"menu-item-279\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-279\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/overview-header-builder\/header-modules\/\" title=\"Header Modules\">Header Modules<\/a><\/li>\n<li id=\"menu-item-281\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-281\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/overview-header-builder\/global-settings\/\" title=\"Header Global Settings\">Header Global Settings<\/a><\/li>\n<li id=\"menu-item-304\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-304\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/overview-header-builder\/transparent-header-configurations\/\" title=\"Transparent Header Configurations\">Transparent Header Configurations<\/a><\/li>\n<li id=\"menu-item-310\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-310\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/overview-header-builder\/mega-menu\/\" title=\"Mega Menu\">Mega Menu<\/a><\/li>\n<li id=\"menu-item-406\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-406\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/overview-header-builder\/tatsu-footer-builder\/\" title=\"Footer Builder\">Footer Builder<\/a><\/li>\n<li id=\"menu-item-280\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-280\"><a href=\"https:\/\/exponentwptheme.com\/documentation\/overview-header-builder\/responsive-settings-and-visibility\/\" title=\"Responsive Settings and Visibility\">Responsive Settings and Visibility<\/a><\/li>\n<\/ul><\/div><\/div><\/div><\/div><\/div><div class = \"tatsu-column-bg-image-wrap\"><div class = \"tatsu-column-bg-image\" ><\/div><\/div><\/div><style>.tatsu-row > .tatsu-fzhyskgwwi7kgw63.tatsu-column{width: 25%;}.tatsu-fzhyskgwwi7kgw63.tatsu-column > .tatsu-column-inner > .tatsu-column-overlay{mix-blend-mode: none;}.tatsu-fzhyskgwwi7kgw63 > .tatsu-column-inner > .tatsu-top-divider{z-index: 9999;}.tatsu-fzhyskgwwi7kgw63 > .tatsu-column-inner > .tatsu-bottom-divider{z-index: 9999;}.tatsu-fzhyskgwwi7kgw63 > .tatsu-column-inner > .tatsu-left-divider{z-index: 9999;}.tatsu-fzhyskgwwi7kgw63 > .tatsu-column-inner > .tatsu-right-divider{z-index: 9999;}.tatsu-fzhyskgwwi7kgw63.tatsu-column{transform: translate3d(0px,0px, 0);}@media only screen and (max-width:1377px) {.tatsu-row > .tatsu-fzhyskgwwi7kgw63.tatsu-column{width: 25%;}}@media only screen and (min-width:768px) and (max-width: 1024px) {.tatsu-row > .tatsu-fzhyskgwwi7kgw63.tatsu-column{width: 25%;}}@media only screen and (max-width: 767px) {.tatsu-row > .tatsu-fzhyskgwwi7kgw63.tatsu-column{width: 100%;}}<\/style><\/div><div  class=\"tatsu-column  tatsu-column-no-bg tatsu-three-fourth tatsu-column-image-none tatsu-column-effect-none  tatsu-fzhyskh2qeb8itiu\" data-animation=\"fadeIn\"   data-parallax-speed=\"0\" style=\"\"><div class=\"tatsu-column-inner \" ><div class=\"tatsu-column-pad-wrap\"><div class=\"tatsu-column-pad\" ><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-fzk4ruxcg1eb2fxi   \" data-animation=\"fadeIn\"  ><style>.tatsu-fzk4ruxcg1eb2fxi .tatsu-inline-text-inner{width: 100%;text-align: left;}.tatsu-fzk4ruxcg1eb2fxi.tatsu-inline-text{margin: 0px 0px 0px 0px;}@media only screen and (max-width: 767px) {.tatsu-fzk4ruxcg1eb2fxi .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p><a href=\"..\/\" target=\"_self\"><span class=\"palette-0 tatsu-inline-link-style2 h9\">CATEGORY &#8211; HEADER AND FOOTER BUILDER<\/span><\/a><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-Bkzn4VwmV   \" data-animation=\"fadeIn\"  ><style>.tatsu-Bkzn4VwmV .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-Bkzn4VwmV .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h3>Header Modules<\/h3>\n<p>Modules are present within the Column. A Column can have multiple modules.\u00a0Modules in Header Builder are tailor made for a website&#8217;s Header. Below are the modules available to construct your header.\u00a0<\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-Skr1r4wXV   \" data-animation=\"fadeIn\"  ><style>.tatsu-Skr1r4wXV .tatsu-inline-text-inner{width: 100%;text-align: left;background-color: rgba(234,242,249,1);padding: 20px 20px 20px 20px;}@media only screen and (max-width: 767px) {.tatsu-Skr1r4wXV .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h6><span class=\"palette-0\">NOTE &#8211;\u00a0<\/span><\/h6>\n<p>Modules added within columns are laid out one beside the other. This will be different to the Tatsu Page Builder, where the modules are always added one below the other<\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-r17zSNP7N   \" data-animation=\"fadeIn\"  ><style>.tatsu-r17zSNP7N .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-r17zSNP7N .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h5>Logo &#8211;\u00a0<\/h5>\n<p>Logo is the most important module for any header. You can upload your logo using this module. The height of the Logo can be adjusted using the option avilable separately for normal header and on sticky header.\u00a0<\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-HyJBrEv7V   \" data-animation=\"fadeIn\"  ><style>.tatsu-HyJBrEv7V .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-HyJBrEv7V .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h5>Horizontal Menu\u00a0&#8211;\u00a0<\/h5>\n<p>This module will layout the menu links in a single row in horizontal fashion. You can choose the menu from the drop down which will list all the menus created under <strong>APPEARANCE > MENUS<\/strong>. The module has options to set the Colors and Typography for the Menu and Sub Menu links.\u00a0<\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-HkcDr4DX4   \" data-animation=\"fadeIn\"  ><style>.tatsu-HkcDr4DX4 .tatsu-inline-text-inner{width: 100%;text-align: left;background-color: rgba(234,242,249,1);padding: 20px 20px 20px 20px;}@media only screen and (max-width: 767px) {.tatsu-HkcDr4DX4 .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h6><span class=\"palette-0\">NOTE &#8211; <\/span><\/h6>\n<p>By default the Horizontal menu will turn into a Drop Down menu in Mobile devices.\u00a0<\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-ryLqB4PQN   \" data-animation=\"fadeIn\"  ><style>.tatsu-ryLqB4PQN .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-ryLqB4PQN .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h5>Vertical Menu\u00a0&#8211;\u00a0<\/h5>\n<p>This module will layout the menu links one below the other in Vertical fashion. You can choose the menu from the drop down which will list all the menus created under <strong>APPEARANCE > MENUS<\/strong>. The module has options to set the Colors and Typography for the Menu and Sub Menu links.\u00a0<\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-rkzhSNwXV   \" data-animation=\"fadeIn\"  ><style>.tatsu-rkzhSNwXV .tatsu-inline-text-inner{width: 100%;text-align: left;background-color: rgba(234,242,249,1);padding: 20px 20px 20px 20px;}@media only screen and (max-width: 767px) {.tatsu-rkzhSNwXV .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h6><span class=\"palette-0\">NOTE &#8211; <\/span><\/h6>\n<p>This menu is specifically built to be used within a column in the Hamburger Menu module ( explained later in the article )<\/p>\n<p>This Module does not support Mega Menu.\u00a0<\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-ByfN_VwX4   \" data-animation=\"fadeIn\"  ><style>.tatsu-ByfN_VwX4 .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-ByfN_VwX4 .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h5>Separator &#8211;<\/h5>\n<p>A simple seperator whose height , width and color can be changed.\u00a0\u00a0<\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-rkwBuVPm4   \" data-animation=\"fadeIn\"  ><style>.tatsu-rkwBuVPm4 .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-rkwBuVPm4 .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h5>Links &#8211;<\/h5>\n<p>A module to add singular links.<\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-ByrLOEvmN   \" data-animation=\"fadeIn\"  ><style>.tatsu-ByrLOEvmN .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-ByrLOEvmN .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h5>Search &#8211;<\/h5>\n<p>A module to add search Icon in the Header.\u00a0<\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-SkdaO4PQE   \" data-animation=\"fadeIn\"  ><style>.tatsu-SkdaO4PQE .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-SkdaO4PQE .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h5>Hamburger Menu &#8211;<\/h5>\n<p>This is another important module in the Header Builder and you can find this module extensively used in our demos. A Hamburger Menu module opens up a Sliding Panel. The Sliding Panel is inturn divided into 3 vertically arranged\u00a0 <span class=\"tatsu-inline-link-style2\"><a href=\"..\/building-blocks\/\" target=\"_self\">Header Columns<\/a><\/span>. Within each column you can add any of the other Header Modules. This enables you to add Logo, Secondary menus, Buttons, Icons etc within the Sliding Panel. The Style of the Hamberburger menu itself, like the BG Color of the Panel, width of the menu icon etc can also be changed. Read this article to know how to edit <span class=\"tatsu-inline-link-style2\"><a href=\"..\/..\/tatsu-components\/#multi-level-modules\" target=\"_self\">Multi Level Modules<\/a><\/span> in TATSU.\u00a0<\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-SJ2e5NPmV   \" data-animation=\"fadeIn\"  ><style>.tatsu-SJ2e5NPmV .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-SJ2e5NPmV .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h5>Multi Purpose Card &#8211;<\/h5>\n<p>A module that presents an Icon, Title and Content in combination. This module supports SVG icons. The module has elaborate typography and color options.\u00a0<\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-HJVy9VPm4   \" data-animation=\"fadeIn\"  ><style>.tatsu-HJVy9VPm4 .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-HJVy9VPm4 .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h5>Single Image,\u00a0Buttons and Icons,\u00a0Text Block,\u00a0Shortcode Editor &#8211;<\/h5>\n<p>Similar to the modules present in Tatsu Page Builder.\u00a0<\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-ryMBcVwmN   \" data-animation=\"fadeIn\"  ><style>.tatsu-ryMBcVwmN .tatsu-inline-text-inner{width: 100%;text-align: left;}.tatsu-ryMBcVwmN.tatsu-inline-text{margin: 0px 0px 10px 0px;}@media only screen and (max-width: 767px) {.tatsu-ryMBcVwmN .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h4><span class=\"palette-0\">Optional Modules<\/span><\/h4>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-BklOcEP7V   \" data-animation=\"fadeIn\"  ><style>.tatsu-BklOcEP7V .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-BklOcEP7V .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h5>Cart &#8211;<\/h5>\n<p>Cart module will be available in Header Module list, if you have activated Woocomerce Plugin in your site for Shop. The number of items added in the Cart will show up over the Icon, and clicking on the icon will open the Shopping Cart in a Siliding Panel.\u00a0\u00a0<\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-rk93c4D7V   \" data-animation=\"fadeIn\"  ><style>.tatsu-rk93c4D7V .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-rk93c4D7V .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h5>Language Selector &#8211;<\/h5>\n<p>This module will be available in Header Module list, if you have activated WPML Plugin in your site.\u00a0<\/p>\n<\/div><\/div><\/div><\/div><div class = \"tatsu-column-bg-image-wrap\"><div class = \"tatsu-column-bg-image\" ><\/div><\/div><\/div><style>.tatsu-row > .tatsu-fzhyskh2qeb8itiu.tatsu-column{width: 75%;}.tatsu-fzhyskh2qeb8itiu.tatsu-column > .tatsu-column-inner > .tatsu-column-pad-wrap > .tatsu-column-pad{padding: 0px 0px 0px 40px;}.tatsu-fzhyskh2qeb8itiu.tatsu-column > .tatsu-column-inner{border-width: 0px 0px 0px 1px;border-color: rgba(237,237,237,1); }.tatsu-fzhyskh2qeb8itiu.tatsu-column > .tatsu-column-inner > .tatsu-column-overlay{mix-blend-mode: none;}.tatsu-fzhyskh2qeb8itiu > .tatsu-column-inner > .tatsu-top-divider{z-index: 9999;}.tatsu-fzhyskh2qeb8itiu > .tatsu-column-inner > .tatsu-bottom-divider{z-index: 9999;}.tatsu-fzhyskh2qeb8itiu > .tatsu-column-inner > .tatsu-left-divider{z-index: 9999;}.tatsu-fzhyskh2qeb8itiu > .tatsu-column-inner > .tatsu-right-divider{z-index: 9999;}.tatsu-fzhyskh2qeb8itiu.tatsu-column{transform: translate3d(0px,0px, 0);}@media only screen and (max-width:1377px) {.tatsu-row > .tatsu-fzhyskh2qeb8itiu.tatsu-column{width: 75%;}}@media only screen and (min-width:768px) and (max-width: 1024px) {.tatsu-row > .tatsu-fzhyskh2qeb8itiu.tatsu-column{width: 75%;}}@media only screen and (max-width: 767px) {.tatsu-row > .tatsu-fzhyskh2qeb8itiu.tatsu-column{width: 100%;}}<\/style><\/div><\/div><\/div><\/div><div class=\"tatsu-section-background-wrap\"><div class = \"tatsu-section-background\" ><\/div><\/div><style>.tatsu-fzhyskgwq6b9htjw .tatsu-section-pad{padding: 90px 0px 90px 0px;}.tatsu-fzhyskgwq6b9htjw > .tatsu-bottom-divider{z-index: 9999;}.tatsu-fzhyskgwq6b9htjw > .tatsu-top-divider{z-index: 9999;}<\/style><\/div>\n","protected":false},"excerpt":{"rendered":"<div><a href=\"https:\/\/exponentwptheme.com\/documentation\/overview-header-builder\/header-modules\/\" class=\"exp-read-more exp-read-more-underlined\">Read More<\/a><\/div>\n","protected":false},"author":2,"featured_media":0,"parent":240,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-278","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/exponentwptheme.com\/documentation\/wp-json\/wp\/v2\/pages\/278","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/exponentwptheme.com\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/exponentwptheme.com\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/exponentwptheme.com\/documentation\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/exponentwptheme.com\/documentation\/wp-json\/wp\/v2\/comments?post=278"}],"version-history":[{"count":0,"href":"https:\/\/exponentwptheme.com\/documentation\/wp-json\/wp\/v2\/pages\/278\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/exponentwptheme.com\/documentation\/wp-json\/wp\/v2\/pages\/240"}],"wp:attachment":[{"href":"https:\/\/exponentwptheme.com\/documentation\/wp-json\/wp\/v2\/media?parent=278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}