{"id":13796,"date":"2025-07-17T17:11:09","date_gmt":"2025-07-17T17:11:09","guid":{"rendered":"https:\/\/www.kadencewp.com\/help-center\/?post_type=docs&#038;p=13796"},"modified":"2026-04-22T14:28:32","modified_gmt":"2026-04-22T14:28:32","password":"","slug":"prevent-transparent-header-from-overlapping-content","status":"publish","type":"docs","link":"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-theme\/prevent-transparent-header-from-overlapping-content\/","title":{"rendered":"Preventing the Theme Transparent Header from Overlapping Page Content"},"content":{"rendered":"\n<p>When you&#8217;re using a <strong>Transparent Header<\/strong> in the Kadence Theme, you might run into a case where the content on your page, like text or images, may be hidden behind the header. This usually happens when the top-level block on your page doesn\u2019t have enough space above it to compensate for the header&#8217;s height. This document will go over general ways to resolve this problem.<\/p>\n\n\n<style>.kb-row-layout-id13796_a8fb25-63 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id13796_a8fb25-63 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id13796_a8fb25-63 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:repeat(2, minmax(0, 1fr));}.kb-row-layout-id13796_a8fb25-63 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id13796_a8fb25-63 > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id13796_a8fb25-63 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id13796_a8fb25-63 alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column13796_99bf73-3b > .kt-inside-inner-col,.kadence-column13796_99bf73-3b > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column13796_99bf73-3b > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column13796_99bf73-3b > .kt-inside-inner-col{flex-direction:column;}.kadence-column13796_99bf73-3b > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column13796_99bf73-3b > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column13796_99bf73-3b{position:relative;}@media all and (max-width: 1024px){.kadence-column13796_99bf73-3b > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column13796_99bf73-3b > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column13796_99bf73-3b\"><div class=\"kt-inside-inner-col\"><style>.kb-image13796_198885-0c.kb-image-is-ratio-size, .kb-image13796_198885-0c .kb-image-is-ratio-size{max-width:350px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image13796_198885-0c.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image13796_198885-0c .kb-image-is-ratio-size{align-self:unset;}.kb-image13796_198885-0c figure{max-width:350px;}.kb-image13796_198885-0c .image-is-svg, .kb-image13796_198885-0c .image-is-svg img{width:100%;}.kb-image13796_198885-0c .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image13796_198885-0c\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1630\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Pic1-scaled.jpg\" alt=\"Broken Header\" class=\"kb-img wp-image-13820\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Pic1-scaled.jpg 2560w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Pic1-300x191.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Pic1-1024x652.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Pic1-768x489.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Pic1-1536x978.jpg 1536w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Pic1-2048x1304.jpg 2048w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Pic1-360x229.jpg 360w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/figure><\/div>\n<\/div><\/div>\n\n\n<style>.kadence-column13796_f69e84-45 > .kt-inside-inner-col,.kadence-column13796_f69e84-45 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column13796_f69e84-45 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column13796_f69e84-45 > .kt-inside-inner-col{flex-direction:column;}.kadence-column13796_f69e84-45 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column13796_f69e84-45 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column13796_f69e84-45{position:relative;}@media all and (max-width: 1024px){.kadence-column13796_f69e84-45 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column13796_f69e84-45 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column13796_f69e84-45\"><div class=\"kt-inside-inner-col\"><style>.kb-image13796_189df5-ff.kb-image-is-ratio-size, .kb-image13796_189df5-ff .kb-image-is-ratio-size{max-width:350px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image13796_189df5-ff.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image13796_189df5-ff .kb-image-is-ratio-size{align-self:unset;}.kb-image13796_189df5-ff figure{max-width:350px;}.kb-image13796_189df5-ff .image-is-svg, .kb-image13796_189df5-ff .image-is-svg img{width:100%;}.kb-image13796_189df5-ff .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image13796_189df5-ff\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1887\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Pic2-scaled.jpg\" alt=\"Fixed Header\" class=\"kb-img wp-image-13821\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Pic2-scaled.jpg 2560w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Pic2-300x221.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Pic2-1024x755.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Pic2-768x566.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Pic2-1536x1132.jpg 1536w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Pic2-2048x1509.jpg 2048w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Pic2-360x265.jpg 360w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/figure><\/div>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.kb-table-of-content-nav.kb-table-of-content-id13796_614e22-07 .kb-table-of-content-wrap{padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);}.kb-table-of-content-nav.kb-table-of-content-id13796_614e22-07 .kb-table-of-contents-title-wrap{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id13796_614e22-07 .kb-table-of-contents-title{font-weight:regular;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id13796_614e22-07 .kb-table-of-content-wrap .kb-table-of-content-list{font-weight:regular;font-style:normal;margin-top:var(--global-kb-spacing-sm, 1.5rem);margin-right:0px;margin-bottom:0px;margin-left:0px;}<\/style>\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading13796_3d0141-97, .wp-block-kadence-advancedheading.kt-adv-heading13796_3d0141-97[data-kb-block=\"kb-adv-heading13796_3d0141-97\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading13796_3d0141-97 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading13796_3d0141-97[data-kb-block=\"kb-adv-heading13796_3d0141-97\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading13796_3d0141-97 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading13796_3d0141-97[data-kb-block=\"kb-adv-heading13796_3d0141-97\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h3 id=\"Figure-Out-Your-Header-Height\" class=\"kt-adv-heading13796_3d0141-97 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading13796_3d0141-97\">Figure Out Your Header Height<\/h3>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading13796_57ef3f-94, .wp-block-kadence-advancedheading.kt-adv-heading13796_57ef3f-94[data-kb-block=\"kb-adv-heading13796_57ef3f-94\"]{margin-bottom:var(--global-kb-spacing-xxs, 0.5rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading13796_57ef3f-94 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading13796_57ef3f-94[data-kb-block=\"kb-adv-heading13796_57ef3f-94\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading13796_57ef3f-94 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading13796_57ef3f-94[data-kb-block=\"kb-adv-heading13796_57ef3f-94\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading13796_57ef3f-94 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading13796_57ef3f-94\">The first thing you\u2019ll want to do is check the height of your Transparent Header. You can do this by following these steps:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Right-click on the header area<\/strong> of your site in your browser, then choose <strong>Inspect<\/strong> (this opens your browser\u2019s developer tools).<\/li>\n\n\n\n<li>Use the <strong>Inspector tool (the arrow icon in the top-left of the panel)<\/strong> to click on any part of your header.<\/li>\n\n\n\n<li>In the <strong>Elements panel<\/strong>, navigate up the HTML structure until you find the parent-level header container.\n<ul class=\"wp-block-list\">\n<li>Look for: <code>header#masthead.site-header<\/code>. This is the main wrapper for your entire header.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Once it\u2019s selected, you will see a value pop-up below the selected header element.\n<ul class=\"wp-block-list\">\n<li>You\u2019ll see something like: <code>1177 \u00d7 149<\/code><br>This tells you the width and height of the element in pixels.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Focus on the smaller number<\/strong>\u2014this is the header height (in the example above, it\u2019s <code>149px<\/code>).<br>That\u2019s the value you\u2019ll want to use when applying top padding to your content or Hero Section.<\/li>\n<\/ol>\n\n\n<style>.kb-image13796_f61b17-42 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image13796_f61b17-42 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2051\" height=\"1159\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Determining-Header-Height.gif\" alt=\"Determining Header Height\" class=\"kb-img wp-image-13806\" \/><\/figure>\n\n\n\n<p>This number is important because it tells you how much top padding you\u2019ll need to add to your content.<\/p>\n\n\n<style>.kb-image13796_e91c4a-56 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image13796_e91c4a-56 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2342\" height=\"424\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Header-Height-Style-Box.jpg\" alt=\"Header Height Style Box\" class=\"kb-img wp-image-13807\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Header-Height-Style-Box.jpg 2342w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Header-Height-Style-Box-300x54.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Header-Height-Style-Box-1024x185.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Header-Height-Style-Box-768x139.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Header-Height-Style-Box-1536x278.jpg 1536w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Header-Height-Style-Box-2048x371.jpg 2048w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Header-Height-Style-Box-360x65.jpg 360w\" sizes=\"auto, (max-width: 2342px) 100vw, 2342px\" \/><\/figure>\n\n\n\n<p>You can also select the <code>header#masthead.site-header<\/code> HTML element and use the <strong>computed<\/strong> tab of the <strong>inspector<\/strong> tools to see these values.<\/p>\n\n\n<style>.kb-image13796_016a53-4f.kb-image-is-ratio-size, .kb-image13796_016a53-4f .kb-image-is-ratio-size{max-width:500px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image13796_016a53-4f.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image13796_016a53-4f .kb-image-is-ratio-size{align-self:unset;}.kb-image13796_016a53-4f figure{max-width:500px;}.kb-image13796_016a53-4f .image-is-svg, .kb-image13796_016a53-4f .image-is-svg img{width:100%;}.kb-image13796_016a53-4f .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image13796_016a53-4f\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1524\" height=\"1436\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Computed.jpg\" alt=\"Computed\" class=\"kb-img wp-image-13809\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Computed.jpg 1524w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Computed-300x283.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Computed-1024x965.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Computed-768x724.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Computed-360x339.jpg 360w\" sizes=\"auto, (max-width: 1524px) 100vw, 1524px\" \/><\/figure><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading13796_99901f-8c, .wp-block-kadence-advancedheading.kt-adv-heading13796_99901f-8c[data-kb-block=\"kb-adv-heading13796_99901f-8c\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading13796_99901f-8c mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading13796_99901f-8c[data-kb-block=\"kb-adv-heading13796_99901f-8c\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading13796_99901f-8c img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading13796_99901f-8c[data-kb-block=\"kb-adv-heading13796_99901f-8c\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h3 id=\"Add-Padding-Based-on-Your-Setup\" class=\"kt-adv-heading13796_99901f-8c wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading13796_99901f-8c\">Add Padding Based on Your Setup<\/h3>\n\n\n\n<p>There are a few ways your top-level content might be set up, and the fix depends on how the page is built. The topics below will go over different ways you can add spacing to account for the Transparent Header.<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading13796_8a32c9-f6, .wp-block-kadence-advancedheading.kt-adv-heading13796_8a32c9-f6[data-kb-block=\"kb-adv-heading13796_8a32c9-f6\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading13796_8a32c9-f6 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading13796_8a32c9-f6[data-kb-block=\"kb-adv-heading13796_8a32c9-f6\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading13796_8a32c9-f6 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading13796_8a32c9-f6[data-kb-block=\"kb-adv-heading13796_8a32c9-f6\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h4 id=\"Using-Theme-Page\/Post\/Archive-Title\" class=\"kt-adv-heading13796_8a32c9-f6 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading13796_8a32c9-f6\">Using Theme Page\/Post\/Archive Title (via Customizer)<\/h4>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading13796_4328d8-1b, .wp-block-kadence-advancedheading.kt-adv-heading13796_4328d8-1b[data-kb-block=\"kb-adv-heading13796_4328d8-1b\"]{margin-bottom:var(--global-kb-spacing-xxs, 0.5rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading13796_4328d8-1b mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading13796_4328d8-1b[data-kb-block=\"kb-adv-heading13796_4328d8-1b\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading13796_4328d8-1b img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading13796_4328d8-1b[data-kb-block=\"kb-adv-heading13796_4328d8-1b\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading13796_4328d8-1b wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading13796_4328d8-1b\">If you\u2019re using the Kadence Theme&#8217;s built-in page title (set in the <strong>Customizer<\/strong>), you can adjust its spacing directly:<\/p>\n\n\n\n<ul style=\"margin-top:var(--wp--preset--spacing--20);margin-bottom:var(--wp--preset--spacing--20)\" class=\"wp-block-list\">\n<li>Go to <strong>Customizer -&gt; Post\/Pages Layout. <\/strong>Then navigate to the appropriate page\/post type.<\/li>\n\n\n\n<li>Look for the<strong> Container Min Height<\/strong> setting<\/li>\n\n\n\n<li>Increase the value until your title clears the Transparent Header<\/li>\n<\/ul>\n\n\n\n<p>This is the cleanest way to add spacing globally when you&#8217;re using the default titles. This setting is only available for the Above Content Title Area.<\/p>\n\n\n<style>.kb-image13796_49762a-c7 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image13796_49762a-c7 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2051\" height=\"1048\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Adjusting-Min-Heights.gif\" alt=\"Adjusting Min Heights\" class=\"kb-img wp-image-13814\" \/><\/figure>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading13796_7cc3aa-af, .wp-block-kadence-advancedheading.kt-adv-heading13796_7cc3aa-af[data-kb-block=\"kb-adv-heading13796_7cc3aa-af\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading13796_7cc3aa-af mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading13796_7cc3aa-af[data-kb-block=\"kb-adv-heading13796_7cc3aa-af\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading13796_7cc3aa-af img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading13796_7cc3aa-af[data-kb-block=\"kb-adv-heading13796_7cc3aa-af\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h5 id=\"Using-In-Content-Title-Layouts\" class=\"kt-adv-heading13796_7cc3aa-af wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading13796_7cc3aa-af\">Using In-Content Title Layouts<\/h5>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading13796_a76e23-2b, .wp-block-kadence-advancedheading.kt-adv-heading13796_a76e23-2b[data-kb-block=\"kb-adv-heading13796_a76e23-2b\"]{margin-bottom:var(--global-kb-spacing-xxs, 0.5rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading13796_a76e23-2b mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading13796_a76e23-2b[data-kb-block=\"kb-adv-heading13796_a76e23-2b\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading13796_a76e23-2b img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading13796_a76e23-2b[data-kb-block=\"kb-adv-heading13796_a76e23-2b\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading13796_a76e23-2b wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading13796_a76e23-2b\">If you&#8217;re using an <strong>In Content<\/strong> title layout, you may notice spacing issues when a Transparent Header is enabled. In these cases, you have a couple of options:<\/p>\n\n\n\n<ul style=\"margin-top:var(--wp--preset--spacing--20);margin-bottom:var(--wp--preset--spacing--20)\" class=\"wp-block-list\">\n<li><strong><a href=\"#Disabling-the-Transparent-Header\">Option 1: Disable the Transparent Header<\/a><\/strong> on those specific pages where the In Content layout is active. This ensures your title has enough space without needing extra adjustments.<\/li>\n\n\n\n<li><strong><a href=\"#Using-a-Hooked-Element-for-Hero-or-Title\" data-type=\"internal\" data-id=\"#Using-a-Hooked-Element-for-Hero-or-Title\">Option 2: Use a Hooked Element<\/a><\/strong> <em>(<a href=\"https:\/\/www.kadencewp.com\/pricing\/\" target=\"_blank\" rel=\"noreferrer noopener\">Theme Kit Pro feature<\/a>)<\/em> in the <strong>Content Section<\/strong> to manually add your own custom title layout. This gives you full control over spacing and design, allowing you to include any additional top padding needed to offset the Transparent Header.<\/li>\n<\/ul>\n\n\n\n<p>This way, your titles remain clear, readable, and well-aligned regardless of the header setup.<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading13796_9796ff-78, .wp-block-kadence-advancedheading.kt-adv-heading13796_9796ff-78[data-kb-block=\"kb-adv-heading13796_9796ff-78\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading13796_9796ff-78 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading13796_9796ff-78[data-kb-block=\"kb-adv-heading13796_9796ff-78\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading13796_9796ff-78 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading13796_9796ff-78[data-kb-block=\"kb-adv-heading13796_9796ff-78\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h4 id=\"Using-a-Hero-Section-Instead-of-Theme-Titles\" class=\"kt-adv-heading13796_9796ff-78 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading13796_9796ff-78\">Using a Hero Section Instead of Theme Titles<\/h4>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading13796_822932-40, .wp-block-kadence-advancedheading.kt-adv-heading13796_822932-40[data-kb-block=\"kb-adv-heading13796_822932-40\"]{margin-bottom:var(--global-kb-spacing-xxs, 0.5rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading13796_822932-40 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading13796_822932-40[data-kb-block=\"kb-adv-heading13796_822932-40\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading13796_822932-40 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading13796_822932-40[data-kb-block=\"kb-adv-heading13796_822932-40\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading13796_822932-40 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading13796_822932-40\">If your page doesn\u2019t use a built-in page title (maybe you&#8217;re designing a custom Hero section instead), you\u2019ll want to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select your top-level block (like a Row Layout)<\/li>\n\n\n\n<li>Open the <strong>Block Settings<\/strong> panel. The padding settings are often found in the Advanced Tab of the Block Settings.<\/li>\n\n\n\n<li>Add <strong>Top Padding<\/strong> equal to or slightly more than your header height. You can use the toggle icon to manually insert a padding value.<\/li>\n<\/ul>\n\n\n<style>.kb-image13796_87feb4-6f .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image13796_87feb4-6f size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2053\" height=\"1140\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Removing-Paddings.gif\" alt=\"Removing Paddings\" class=\"kb-img wp-image-13816\" \/><\/figure>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading13796_fb1938-5c, .wp-block-kadence-advancedheading.kt-adv-heading13796_fb1938-5c[data-kb-block=\"kb-adv-heading13796_fb1938-5c\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading13796_fb1938-5c mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading13796_fb1938-5c[data-kb-block=\"kb-adv-heading13796_fb1938-5c\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading13796_fb1938-5c img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading13796_fb1938-5c[data-kb-block=\"kb-adv-heading13796_fb1938-5c\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h4 id=\"Using-a-Hooked-Element-for-Hero-or-Title\" class=\"kt-adv-heading13796_fb1938-5c wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading13796_fb1938-5c\">Using a Hooked Element for Hero or Title<\/h4>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading13796_c7376e-19, .wp-block-kadence-advancedheading.kt-adv-heading13796_c7376e-19[data-kb-block=\"kb-adv-heading13796_c7376e-19\"]{margin-bottom:var(--global-kb-spacing-xxs, 0.5rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading13796_c7376e-19 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading13796_c7376e-19[data-kb-block=\"kb-adv-heading13796_c7376e-19\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading13796_c7376e-19 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading13796_c7376e-19[data-kb-block=\"kb-adv-heading13796_c7376e-19\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading13796_c7376e-19 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading13796_c7376e-19\">If you&#8217;re using a <strong>Hooked Element<\/strong> (<a href=\"https:\/\/www.kadencewp.com\/pricing\/\" target=\"_blank\" rel=\"noreferrer noopener\">from Kadence Theme Kit Pro<\/a>) to add a custom title or hero section:<\/p>\n\n\n\n<ul style=\"margin-top:var(--wp--preset--spacing--20);margin-bottom:var(--wp--preset--spacing--20)\" class=\"wp-block-list\">\n<li>Edit the Hooked Element itself<\/li>\n\n\n\n<li>Add top padding to the first block inside the Element to match the header height<\/li>\n<\/ul>\n\n\n\n<p>This is especially helpful if you&#8217;re replacing the entire hero\/title area or creating custom layouts across multiple pages.<\/p>\n\n\n<style>.kb-image13796_151988-d6 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image13796_151988-d6 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2045\" height=\"1039\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Element-Padding.gif\" alt=\"Element Padding\" class=\"kb-img wp-image-13823\" \/><\/figure>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading13796_342737-54, .wp-block-kadence-advancedheading.kt-adv-heading13796_342737-54[data-kb-block=\"kb-adv-heading13796_342737-54\"]{text-align:center;font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading13796_342737-54 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading13796_342737-54[data-kb-block=\"kb-adv-heading13796_342737-54\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading13796_342737-54 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading13796_342737-54[data-kb-block=\"kb-adv-heading13796_342737-54\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading13796_342737-54 wp-block-kadence-advancedheading has-theme-palette-8-background-color has-background\" data-kb-block=\"kb-adv-heading13796_342737-54\"><em>You can learn more about Hooked Elements <a href=\"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-theme\/what-are-kadence-hooked-elements\/\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/em><\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading13796_d2ca66-8d, .wp-block-kadence-advancedheading.kt-adv-heading13796_d2ca66-8d[data-kb-block=\"kb-adv-heading13796_d2ca66-8d\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading13796_d2ca66-8d mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading13796_d2ca66-8d[data-kb-block=\"kb-adv-heading13796_d2ca66-8d\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading13796_d2ca66-8d img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading13796_d2ca66-8d[data-kb-block=\"kb-adv-heading13796_d2ca66-8d\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 id=\"Disabling-the-Transparent-Header\" class=\"kt-adv-heading13796_d2ca66-8d wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading13796_d2ca66-8d\">Disabling the Transparent Header<\/h2>\n\n\n\n<p>In some cases, you may need to just <strong>disable<\/strong> <strong>the<\/strong> <strong>Transparent<\/strong> <strong>Header<\/strong> for a <span style=\"text-decoration: underline\">specific page type<\/span>. This can be done by going to the <em><strong>Customizer -&gt; Header -&gt; Transparent Header<\/strong><\/em> settings. You\u2019ll find options to disable the <em>Transparent<\/em> <em>Header<\/em> on specific page types, such as <strong>Search<\/strong> <strong>and<\/strong> <strong>Archive<\/strong> pages.<\/p>\n\n\n<style>.kb-image13796_67b475-8c .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image13796_67b475-8c size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2056\" height=\"1077\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Disabling-the-Transparent-Header.gif\" alt=\"Disabling the Transparent Header\" class=\"kb-img wp-image-13817\" \/><\/figure>\n\n\n\n<p><em><span style=\"text-decoration: underline\">If you&#8217;ve made it this far, congratulations! <\/span><\/em><br><strong>Pro Tip:<\/strong> Whenever possible, use your browser tools to get the exact header height. This ensures your content sits nicely <strong>below<\/strong> the Transparent Header on all screen sizes.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When you&#8217;re using a Transparent Header in the Kadence Theme, you might run into a case where the content on your page, like text or images, may be hidden behind the header. This usually happens when the top-level block on your page doesn\u2019t have enough space above it to compensate for the header&#8217;s height. This&#8230;<\/p>\n","protected":false},"author":148263,"featured_media":13821,"comment_status":"open","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"doc_category":[407],"doc_tag":[],"knowledge_base":[6],"class_list":["post-13796","docs","type-docs","status-publish","has-post-thumbnail","hentry","doc_category-theme-header","knowledge_base-kadence-theme"],"year_month":"2026-04","word_count":775,"total_views":"3028","reactions":{"happy":"1","normal":"0","sad":"0"},"author_info":{"display_name":"victormonk","author_link":"https:\/\/www.kadencewp.com\/help-center\/author\/victormonk\/"},"doc_category_info":[{"term_name":"Header","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-theme\/theme-header\/"}],"doc_tag_info":[],"knowledge_base_info":[{"term_name":"Kadence Theme","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-theme\/","term_slug":"kadence-theme"}],"knowledge_base_slug":["kadence-theme"],"taxonomy_info":{"doc_category":[{"value":407,"label":"Header"}],"knowledge_base":[{"value":6,"label":"Kadence Theme"}]},"featured_image_src_large":["https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Pic2-1024x755.jpg",1024,755,true],"comment_info":0,"_links":{"self":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/13796","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/users\/148263"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/comments?post=13796"}],"version-history":[{"count":17,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/13796\/revisions"}],"predecessor-version":[{"id":13833,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/13796\/revisions\/13833"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/media\/13821"}],"wp:attachment":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/media?parent=13796"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_category?post=13796"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_tag?post=13796"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/knowledge_base?post=13796"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}