{"id":965,"date":"2020-11-06T11:59:30","date_gmt":"2020-11-06T18:59:30","guid":{"rendered":"https:\/\/kadence-theme.com\/?post_type=knowledgebase&#038;p=965"},"modified":"2025-03-17T02:09:43","modified_gmt":"2025-03-17T02:09:43","password":"","slug":"navigation-colors-transparent-header-sticky-header","status":"publish","type":"docs","link":"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-theme\/navigation-colors-transparent-header-sticky-header\/","title":{"rendered":"Customizing the Classic Header Navigation Colors (Default Header, Transparent Header, Sticky Header)"},"content":{"rendered":"\n<p>When using the <strong>Kadence<\/strong> <strong>Theme<\/strong> <strong>Classic<\/strong> <strong>Header<\/strong> in the <strong>WordPress<\/strong> <strong>Customizer<\/strong>, you have several options for setting <strong>Navigation Colors<\/strong>. You can customize the default navigation colors, the transparent header navigation colors, and the sticky header navigation colors. Learn more about how to customize these settings using the header options below.<\/p>\n\n\n<style>.kb-table-of-content-nav.kb-table-of-content-id965_d6721d-7d .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-id965_d6721d-7d .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-id965_d6721d-7d .kb-table-of-contents-title{font-weight:regular;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id965_d6721d-7d .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-heading965_ddc9a5-7b, .wp-block-kadence-advancedheading.kt-adv-heading965_ddc9a5-7b[data-kb-block=\"kb-adv-heading965_ddc9a5-7b\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading965_ddc9a5-7b mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading965_ddc9a5-7b[data-kb-block=\"kb-adv-heading965_ddc9a5-7b\"] 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-heading965_ddc9a5-7b img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading965_ddc9a5-7b[data-kb-block=\"kb-adv-heading965_ddc9a5-7b\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 id=\"default-header\" class=\"kt-adv-heading965_ddc9a5-7b wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading965_ddc9a5-7b\">Default Header<\/h2>\n\n\n\n<p>The&nbsp;<em><strong>Kadence<\/strong> <strong>Theme<\/strong> <strong>Classic<\/strong> <strong>Header<\/strong><\/em>&nbsp;navigation colors can be modified for the <strong>Default Header State<\/strong> from the <strong>Customizer -&gt;&nbsp;<em>Header <\/em><\/strong><em>settings.<\/em> <\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click the <span style=\"text-decoration: underline\">gear settings icon<\/span> beside the desired <strong>Header Navigation Element<\/strong> you wish to modify. (For example, the&nbsp;<em>Primary Navigation or the Secondary Navigation<\/em>).<\/li>\n\n\n\n<li style=\"margin-bottom:0\">Click on the&nbsp;<strong>DESIGN<\/strong>&nbsp;(tab) and find the&nbsp;<strong>Navigation Colors<\/strong>&nbsp;setting. Here you can set the colors of the current navigation. The available colors include the Initial Color, Hover Color, and Active Color.<\/li>\n<\/ol>\n\n\n<style>.kb-image965_ce8ff8-b6 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image965_ce8ff8-b6\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"711\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2020\/11\/Zight-Recording-2025-03-12-at-06.46.10-AM-3.gif\" alt=\"\" class=\"kb-img wp-image-11313\" \/><\/figure><\/div>\n\n\n\n<p>These colors represent the<strong> Default Header State<\/strong>, meaning a <span style=\"text-decoration: underline\">non-transparent and\/or non-sticky header<\/span>. Learn about how to control the <a href=\"#transparent-header\">Transparent Header<\/a> and <a href=\"#sticky-header\">Sticky Header<\/a> Navigation Colors below.<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading965_542bff-b0, .wp-block-kadence-advancedheading.kt-adv-heading965_542bff-b0[data-kb-block=\"kb-adv-heading965_542bff-b0\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading965_542bff-b0 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading965_542bff-b0[data-kb-block=\"kb-adv-heading965_542bff-b0\"] 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-heading965_542bff-b0 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading965_542bff-b0[data-kb-block=\"kb-adv-heading965_542bff-b0\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 id=\"transparent-header\" class=\"kt-adv-heading965_542bff-b0 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading965_542bff-b0\">Transparent Header<\/h2>\n\n\n\n<p>To customize the navigation colors for your <strong>Kadence<\/strong> <strong>Theme<\/strong> <strong>Classic<\/strong> <strong>Header<\/strong> when using a <strong>Transparent<\/strong> <strong>Header<\/strong>, go to the <strong>Customizer -&gt; Header -&gt; Transparent Header <\/strong>settings. Then click on the <strong>Design<\/strong> <strong>Tab<\/strong> and locate the <strong><em>Navigation Colors<\/em> <\/strong>setting. Here, you can set the <strong>Navigation Colors<\/strong> for the <strong>Transparent<\/strong> <strong>Header <\/strong>state.<\/p>\n\n\n<style>.kb-image965_352800-18 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image965_352800-18 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1009\" height=\"943\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/03\/Transparent-Navigation-Colors.gif\" alt=\"Transparent Navigation Colors\" class=\"kb-img wp-image-11317\" \/><\/figure>\n\n\n\n<p>You can also adjust additional<strong> Classic Header Transparent Elements<\/strong>, such as the ones listed below.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Site Title Color<\/strong>: Initial Color<\/li>\n\n\n\n<li><strong>Navigation Colors<\/strong>: Initial Color, Hover Color and Active Color<\/li>\n\n\n\n<li><strong>Navigation Items Background<\/strong>: Initial Background, Hover Background and Active Background<\/li>\n\n\n\n<li><strong>Button Colors<\/strong>: Color, Hover Color, Background, Background Hover, Border, Border Hover<\/li>\n\n\n\n<li><strong>Social Colors<\/strong>: Color, Hover Color, Background, Background Hover, Border, Border Hover<\/li>\n\n\n\n<li><strong>HTML Colors<\/strong>: Color, Link Color, Link Hover<\/li>\n\n\n\n<li><strong>Transparent Header Background<\/strong>: Desktop, Tablet, Mobile<\/li>\n\n\n\n<li><strong>Bottom Border<\/strong>: Desktop, Tablet, Mobile<\/li>\n<\/ul>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading965_5ed48a-ed, .wp-block-kadence-advancedheading.kt-adv-heading965_5ed48a-ed[data-kb-block=\"kb-adv-heading965_5ed48a-ed\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading965_5ed48a-ed mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading965_5ed48a-ed[data-kb-block=\"kb-adv-heading965_5ed48a-ed\"] 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-heading965_5ed48a-ed img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading965_5ed48a-ed[data-kb-block=\"kb-adv-heading965_5ed48a-ed\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 id=\"sticky-header\" class=\"kt-adv-heading965_5ed48a-ed wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading965_5ed48a-ed\">Sticky Header<\/h2>\n\n\n\n<p>To customize the navigation colors for your <strong>Kadence<\/strong> <strong>Theme<\/strong> <strong>Classic<\/strong> <strong>Header<\/strong> when using a <strong>Sticky<\/strong> <strong>Header<\/strong>, go to the <strong>Customizer -&gt; Header -&gt; Sticky Header <\/strong>settings. Then click on the <strong>Design<\/strong> <strong>Tab<\/strong> and locate the <strong><em>Navigation Colors<\/em> <\/strong>setting. Here, you can set the <strong>Navigation Colors<\/strong> for the <strong>Header<\/strong> when in the <strong>Sticky<\/strong> state..<\/p>\n\n\n<style>.kb-image965_01c3ce-b3 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image965_01c3ce-b3 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1019\" height=\"935\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/03\/Sticky-Nav-Colors.gif\" alt=\"Sticky Nav Colors\" class=\"kb-img wp-image-11318\" \/><\/figure>\n\n\n\n<p>You can also adjust additional<strong> Classic Header Sticky Elements<\/strong>, such as the ones listed below.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Site Title Color<\/strong>: Initial Color<\/li>\n\n\n\n<li><strong>Navigation Colors<\/strong>: Initial Color, Hover Color and Active Color<\/li>\n\n\n\n<li><strong>Navigation Items Background<\/strong>: Initial Background, Hover Background and Active Background<\/li>\n\n\n\n<li><strong>Button Colors<\/strong>: Color, Hover Color, Background, Background Hover, Border, Border Hover<\/li>\n\n\n\n<li><strong>Social Colors<\/strong>: Color, Hover Color, Background, Background Hover, Border, Border Hover<\/li>\n\n\n\n<li><strong>HTML Colors<\/strong>: Color, Link Color, Link Hover<\/li>\n\n\n\n<li><strong>Sticky Header Background<\/strong>: Desktop, Tablet, Mobile<\/li>\n\n\n\n<li><strong>Sticky Bottom Border<\/strong>: Desktop, Tablet, Mobile<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>When using the Kadence Theme Classic Header in the WordPress Customizer, you have several options for setting Navigation Colors. You can customize the default navigation colors, the transparent header navigation colors, and the sticky header navigation colors. Learn more about how to customize these settings using the header options below. Default Header The&nbsp;Kadence Theme Classic&#8230;<\/p>\n","protected":false},"author":1265,"featured_media":0,"comment_status":"open","ping_status":"open","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-965","docs","type-docs","status-publish","hentry","doc_category-theme-header","knowledge_base-kadence-theme"],"year_month":"2026-04","word_count":437,"total_views":"8435","reactions":{"happy":"1","normal":"0","sad":"0"},"author_info":{"display_name":"Ben Ritner","author_link":"https:\/\/www.kadencewp.com\/help-center\/author\/britner\/"},"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":false,"comment_info":0,"_links":{"self":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/965","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\/1265"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/comments?post=965"}],"version-history":[{"count":16,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/965\/revisions"}],"predecessor-version":[{"id":11408,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/965\/revisions\/11408"}],"wp:attachment":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/media?parent=965"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_category?post=965"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_tag?post=965"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/knowledge_base?post=965"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}