{"id":244,"date":"2019-01-24T09:16:52","date_gmt":"2019-01-24T09:16:52","guid":{"rendered":"https:\/\/exponentwptheme.com\/documentation\/?page_id=239"},"modified":"2019-01-24T09:16:52","modified_gmt":"2019-01-24T09:16:52","slug":"responsive-settings-and-visibility","status":"publish","type":"page","link":"https:\/\/spyrowptheme.com\/documentation\/overview-header-builder\/responsive-settings-and-visibility\/","title":{"rendered":"Responsive Settings and Visibility"},"content":{"rendered":"<div  class=\"tatsu-fziqxb2kll6nripx 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-fziqxb2kob1ef71v\" ><div  class=\"tatsu-row \" ><div  class=\"tatsu-column  tatsu-column-no-bg tatsu-one-fourth tatsu-column-image-none tatsu-column-effect-none  tatsu-fziqxb2krq4n01kq\" 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-fziqxb2kt0fug66c   \" 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-522\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-522\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/overview-header-builder\/header-builder-introduction\/\" title=\"Header Builder Overview\">Header Builder Overview<\/a><\/li>\n<li id=\"menu-item-521\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-521\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/overview-header-builder\/building-blocks\/\" title=\"Header Building Blocks\">Header Building Blocks<\/a><\/li>\n<li id=\"menu-item-518\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-518\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/overview-header-builder\/header-modules\/\" title=\"Header Modules\">Header Modules<\/a><\/li>\n<li id=\"menu-item-520\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-520\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/overview-header-builder\/global-settings\/\" title=\"Header Global Settings\">Header Global Settings<\/a><\/li>\n<li id=\"menu-item-523\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-523\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/overview-header-builder\/transparent-header-configurations\/\" title=\"Transparent Header Configurations\">Transparent Header Configurations<\/a><\/li>\n<li id=\"menu-item-524\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-524\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/overview-header-builder\/mega-menu\/\" title=\"Mega Menu\">Mega Menu<\/a><\/li>\n<li id=\"menu-item-539\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-539\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/overview-header-builder\/tatsu-footer-builder\/\" title=\"Footer Builder\">Footer Builder<\/a><\/li>\n<li id=\"menu-item-519\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-519\"><a href=\"https:\/\/spyrowptheme.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-fziqxb2krq4n01kq.tatsu-column{width: 25%;}.tatsu-fziqxb2krq4n01kq.tatsu-column > .tatsu-column-inner > .tatsu-column-overlay{mix-blend-mode: none;}.tatsu-fziqxb2krq4n01kq > .tatsu-column-inner > .tatsu-top-divider{z-index: 9999;}.tatsu-fziqxb2krq4n01kq > .tatsu-column-inner > .tatsu-bottom-divider{z-index: 9999;}.tatsu-fziqxb2krq4n01kq > .tatsu-column-inner > .tatsu-left-divider{z-index: 9999;}.tatsu-fziqxb2krq4n01kq > .tatsu-column-inner > .tatsu-right-divider{z-index: 9999;}.tatsu-fziqxb2krq4n01kq.tatsu-column{transform: translate3d(0px,0px, 0);}@media only screen and (max-width:1377px) {.tatsu-row > .tatsu-fziqxb2krq4n01kq.tatsu-column{width: 25%;}}@media only screen and (min-width:768px) and (max-width: 1024px) {.tatsu-row > .tatsu-fziqxb2krq4n01kq.tatsu-column{width: 25%;}}@media only screen and (max-width: 767px) {.tatsu-row > .tatsu-fziqxb2krq4n01kq.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-fziqxb2rp1e4m5tx\" 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-fzk4n7qxw4ahrr4u   \" data-animation=\"fadeIn\"  ><style>.tatsu-fzk4n7qxw4ahrr4u .tatsu-inline-text-inner{width: 100%;text-align: left;}.tatsu-fzk4n7qxw4ahrr4u.tatsu-inline-text{margin: 0px 0px 0px 0px;}@media only screen and (max-width: 767px) {.tatsu-fzk4n7qxw4ahrr4u .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p><a href=\"..\/\" target=\"_self\" rel=\"noopener\"><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-HyQAYfO7E   \" data-animation=\"fadeIn\"  ><style>.tatsu-HyQAYfO7E .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-HyQAYfO7E .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h3>Responsive Visibility and Responsive Controls<\/h3>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-H1IycGdQV   \" data-animation=\"fadeIn\"  ><style>.tatsu-H1IycGdQV .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-H1IycGdQV .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p>At the bottom of the left panel in Tatsu interface, you will find the option to change the view port of the builder. Choose the device icon from this controller, to make changes to settings in that particular screen size.\u00a0<\/p>\n<\/div><\/div><div  class=\"tatsu-single-image tatsu-module tatsu-image-lazyload tatsu-SyEliGd74  \" data-animation=\"fadeIn\"  ><div class=\"tatsu-single-image-inner \" style=\"width : 602px;\" ><div class = \"tatsu-single-image-padding-wrap\" style = \"padding-bottom : 74.750830564784%;\" ><\/div><img class = \"tatsu-gradient-border\" alt = \"\" title = \"responsive-options\" data-src = \"https:\/\/spyrowptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2019\/01\/responsive-options-1.jpg\" src =\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\"  \/><\/div><style>.tatsu-SyEliGd74{margin: 0px 0px 30px 40px;}.tatsu-SyEliGd74 .tatsu-single-image-inner{border-style: solid;border-width: 5px;border-color: rgba(239,239,239,1); max-width: 100%;}.tatsu-SyEliGd74.tatsu-single-image{transform: translate3d(0px,0px, 0);}<\/style><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-ry7LiGdmV   \" data-animation=\"fadeIn\"  ><style>.tatsu-ry7LiGdmV .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-ry7LiGdmV .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h4>Responsive Visibility<\/h4>\n<p>All the modules in the Header Builder including the Header Row and Column have Responsive Visibility Controls. The option will have the label &#8220;Hide In&#8221;. You can select multiple devices from which you want to hide a particular module. A most common usage of this control will be to <strong>hide<\/strong> the Horizontal Menu from Mobile nad Tablet devices and add a Hamburger Menu that is visible\u00a0<\/p>\n<\/div><\/div><div  class=\"tatsu-single-image tatsu-module tatsu-image-lazyload tatsu-ByoasGO7E  \" data-animation=\"fadeIn\"  ><div class=\"tatsu-single-image-inner \" style=\"width : 297px;\" ><div class = \"tatsu-single-image-padding-wrap\" style = \"padding-bottom : 37.037037037037%;\" ><\/div><img class = \"tatsu-gradient-border\" alt = \"\" title = \"responsive-visibility\" data-src = \"https:\/\/spyrowptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2019\/01\/responsive-visibility-1.jpg\" src =\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\"  \/><\/div><style>.tatsu-ByoasGO7E{margin: 0px 0px 30px 40px;}.tatsu-ByoasGO7E .tatsu-single-image-inner{border-style: solid;border-width: 5px;border-color: rgba(239,239,239,1); max-width: 100%;}.tatsu-ByoasGO7E.tatsu-single-image{transform: translate3d(0px,0px, 0);}<\/style><\/div><div  class=\"tatsu-module tatsu-video tatsu-youtube-wrap tatsu-B1xpxXOX4   \" data-animation=\"fadeIn\"  ><style>.tatsu-B1xpxXOX4{margin: 0px 0px 30px 40px;box-shadow: 0px 5px 30px 0px rgba(214,215,216,0.57);}<\/style><div class=\"gdpr-alt-image  be-gdpr-consent-message\"><img decoding=\"async\" style=\"opacity:1;\" src=\"https:\/\/img.youtube.com\/vi\/DzsJzg3__S8\/maxresdefault.jpg\"\/><div class=\"gdpr-video-alternate-image-content\" >Your consent is required to display this content from  youtube - <a href=\"#gdpr-popup\" class=\"mobx privacy-settings\" data-type=\"HTML\" >Privacy Settings<\/a><\/div><\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-fziryfahgcdghyck   \" data-animation=\"fadeIn\"  ><style>.tatsu-fziryfahgcdghyck .tatsu-inline-text-inner{width: 100%;text-align: left;}.tatsu-fziryfahgcdghyck.tatsu-inline-text{margin: 0px 0px 15px 0px;}@media only screen and (max-width: 767px) {.tatsu-fziryfahgcdghyck .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h4>Responsive Controls<\/h4>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-fzis03d0l9ey2ytr   \" data-animation=\"fadeIn\"  ><style>.tatsu-fzis03d0l9ey2ytr .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-fzis03d0l9ey2ytr .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p>While editing the settings of any module in TATSU, you need to look for a small monitor icon beside the label of the setting. This icon means, the field can be changed responsively.\u00a0<\/p>\n<\/div><\/div><div  class=\"tatsu-single-image tatsu-module tatsu-image-lazyload tatsu-fzis03d2klajpptl  \" data-animation=\"fadeIn\"  ><div class=\"tatsu-single-image-inner \" style=\"width : 590px;\" ><div class = \"tatsu-single-image-padding-wrap\" style = \"padding-bottom : 52.203389830508%;\" ><\/div><img class = \"tatsu-gradient-border\" alt = \"\" title = \"responsive-icon\" data-src = \"https:\/\/spyrowptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2019\/01\/responsive-icon-2-1.jpg\" src =\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\"  \/><\/div><style>.tatsu-fzis03d2klajpptl{margin: 0px 0px 30px 30px;}.tatsu-fzis03d2klajpptl .tatsu-single-image-inner{border-style: solid;border-width: 5px;border-color: rgba(239,239,239,1); max-width: 60%;}.tatsu-fzis03d2klajpptl.tatsu-single-image{transform: translate3d(0px,0px, 0);}<\/style><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-fzis03d5l83s2ane   \" data-animation=\"fadeIn\"  ><style>.tatsu-fzis03d5l83s2ane .tatsu-inline-text-inner{width: 100%;text-align: left;background-color: rgba(234,242,249,1);padding: 30px 30px 30px 30px;}@media only screen and (max-width: 767px) {.tatsu-fzis03d5l83s2ane .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h6><span class=\"palette-0\">NOTE<\/span> &#8211;\u00a0<\/h6>\n<p>1. The changes made in the responsive settings will only be applied for the particular device. For ex. if you are modifying the Padding Value for Laptop device, the change will apply only for Laptop screens and Tablet and Mobile will still hold the default values.\u00a0<\/p>\n<p>2. Only the &#8220;settings&#8221; which have the &#8220;device&#8217; icon can be changed responsively. Actions like rearranging or deleting the modules will be applied on all screen sizes. In case you need to rearrgne the placements of certain modules specific to a device, we recommend you use the Responsive Visibility control (explained above).\u00a0<\/p>\n<p>3. Device Size Window &#8211;\u00a0<\/p>\n<p><span style=\"font-size: 17px;letter-spacing: 0px\"><strong>Mobile<\/strong> &lt; 767px<\/span><br \/><span style=\"font-size: 17px;letter-spacing: 0px\"><strong>Tablet<\/strong> \u2013 \u00a0768px \u2013 1024px<\/span><br \/><span style=\"font-size: 17px;letter-spacing: 0px\"><strong>Laptops<\/strong> \u2013 1025px \u2013 1377px<\/span><br \/><span style=\"font-size: 17px;letter-spacing: 0px\"><strong>Desktops<\/strong> \u2013 &gt; 1378px<\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-fzis03d3i47g824e   \" data-animation=\"fadeIn\"  ><style>.tatsu-fzis03d3i47g824e .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-fzis03d3i47g824e .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p>Just click on the icon, and 4 icons representing view ports will be seen. Click on each view port icon to edit the value of that setting. Once you click on the view port, the display on right panel will also be changed so you can view your changes instantly.\u00a0<\/p>\n<\/div><\/div><div  class=\"tatsu-single-image tatsu-module tatsu-image-lazyload tatsu-fzis03d4tg5sas2z  \" data-animation=\"fadeIn\"  ><div class=\"tatsu-single-image-inner \" style=\"width : 596px;\" ><div class = \"tatsu-single-image-padding-wrap\" style = \"padding-bottom : 55.03355704698%;\" ><\/div><img class = \"tatsu-gradient-border\" alt = \"\" title = \"responsive-fieldset\" data-src = \"https:\/\/spyrowptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2019\/01\/responsive-fieldset-1.jpg\" src =\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\"  \/><\/div><style>.tatsu-fzis03d4tg5sas2z{margin: 0px 0px 30px 30px;}.tatsu-fzis03d4tg5sas2z .tatsu-single-image-inner{border-style: solid;border-width: 5px;border-color: rgba(239,239,239,1); max-width: 60%;}.tatsu-fzis03d4tg5sas2z.tatsu-single-image{transform: translate3d(0px,0px, 0);}<\/style><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-fzk4n7p0fkb6pauv   \" data-animation=\"fadeIn\"  ><style>.tatsu-fzk4n7p0fkb6pauv .tatsu-inline-text-inner{width: 100%;text-align: left;}.tatsu-fzk4n7p0fkb6pauv.tatsu-inline-text{margin: 0px 0px 0px 0px;}@media only screen and (max-width: 767px) {.tatsu-fzk4n7p0fkb6pauv .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p><a href=\"..\/\" target=\"_self\" rel=\"noopener\"><span class=\"palette-0 tatsu-inline-link-style2 h9\">CATEGORY &#8211; HEADER AND FOOTER BUILDER<\/span><\/a><\/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-fziqxb2rp1e4m5tx.tatsu-column{width: 75%;}.tatsu-fziqxb2rp1e4m5tx.tatsu-column > .tatsu-column-inner > .tatsu-column-pad-wrap > .tatsu-column-pad{padding: 0px 0px 0px 40px;}.tatsu-fziqxb2rp1e4m5tx.tatsu-column > .tatsu-column-inner{border-width: 0px 0px 0px 1px;border-color: rgba(237,237,237,1); }.tatsu-fziqxb2rp1e4m5tx.tatsu-column > .tatsu-column-inner > .tatsu-column-overlay{mix-blend-mode: none;}.tatsu-fziqxb2rp1e4m5tx > .tatsu-column-inner > .tatsu-top-divider{z-index: 9999;}.tatsu-fziqxb2rp1e4m5tx > .tatsu-column-inner > .tatsu-bottom-divider{z-index: 9999;}.tatsu-fziqxb2rp1e4m5tx > .tatsu-column-inner > .tatsu-left-divider{z-index: 9999;}.tatsu-fziqxb2rp1e4m5tx > .tatsu-column-inner > .tatsu-right-divider{z-index: 9999;}.tatsu-fziqxb2rp1e4m5tx.tatsu-column{transform: translate3d(0px,0px, 0);}@media only screen and (max-width:1377px) {.tatsu-row > .tatsu-fziqxb2rp1e4m5tx.tatsu-column{width: 75%;}}@media only screen and (min-width:768px) and (max-width: 1024px) {.tatsu-row > .tatsu-fziqxb2rp1e4m5tx.tatsu-column{width: 75%;}}@media only screen and (max-width: 767px) {.tatsu-row > .tatsu-fziqxb2rp1e4m5tx.tatsu-column{width: 100%;}}<\/style><\/div><\/div><\/div><\/div><div class=\"tatsu-section-background-wrap\"><div class = \"tatsu-section-background\" ><\/div><\/div><style>.tatsu-fziqxb2kll6nripx .tatsu-section-pad{padding: 90px 0px 90px 0px;}.tatsu-fziqxb2kll6nripx > .tatsu-bottom-divider{z-index: 9999;}.tatsu-fziqxb2kll6nripx > .tatsu-top-divider{z-index: 9999;}<\/style><\/div>\n","protected":false},"excerpt":{"rendered":"<div><a href=\"https:\/\/spyrowptheme.com\/documentation\/overview-header-builder\/responsive-settings-and-visibility\/\" class=\"exp-read-more exp-read-more-underlined\">Read More<\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"parent":240,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-244","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/pages\/244","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/comments?post=244"}],"version-history":[{"count":0,"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/pages\/244\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/pages\/240"}],"wp:attachment":[{"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/media?parent=244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}