{"id":101,"date":"2021-06-27T11:13:55","date_gmt":"2021-06-27T11:13:55","guid":{"rendered":"https:\/\/apressthemes.com\/help\/?post_type=docs&p=101"},"modified":"2021-07-04T06:41:38","modified_gmt":"2021-07-04T06:41:38","password":"","slug":"header-styling","status":"publish","type":"docs","link":"https:\/\/apressthemes.com\/help\/docs\/header-styling\/","title":{"rendered":"Header Styling"},"content":{"rendered":"

Header Background<\/h3>\n

The following settings work with Preset Header and Custom Header set form Apress Theme options.<\/p>\n

Set Header Color<\/strong> – Controls the background image, background position, background size, etc for the header.<\/span><\/p>\n

Header Typography<\/strong> – These settings control the typography for Header Font.<\/span><\/p>\n

100% Header Width<\/strong> – Check this box to set the header to 100% of the browser width. Uncheck to follow site width. Only works with wide layout mode.<\/span><\/p>\n

\"\"<\/p>\n

Top Bar Styling<\/h3>\n

Customize Styling for Top bar Section – This works for Preset Headers & Custom Header.<\/strong><\/p>\n

Select Top bar styling options –<\/strong><\/p>\n

Section Height<\/strong> –\u00a0 Controls the<\/span> top bar height
\nTop Bar Padding<\/strong> – Controls the right\/left padding for top bar.
\n<\/span>Top Bar Background Color Option<\/strong>– Select color or gradient for top bar background.
\nTop Bar Border<\/strong> – Add border for top bar section.
\nTop Bar Border Color<\/strong> – Add top bar border color
\nTop Bar Font Color<\/strong> – Add top bar font color – regular and hover color
\nSection One Element Space<\/strong> – Controls the space of the section One Element like space between social and tagline.
\nHeader Element Separator<\/strong> – Select if separator needed.
\nTop Bar Font Size<\/strong> – Set the top bar font size.<\/p>\n

\"\"<\/p>\n

 <\/p>\n

Section Two Styling<\/h3>\n

Customize Styling for Primary Header ( Section2 ) – This works for Preset Headers & Custom Header.<\/strong><\/p>\n

Select Section styling options –<\/strong><\/p>\n

Section Height<\/strong> –\u00a0 Controls the<\/span> top bar height
\nSection 2 Padding<\/strong> – Controls the right\/left padding for top bar.<\/span>
\nSection 2 Background Color Option<\/strong>– Select color or gradient for top bar background.
\nSection 2 Border<\/strong> – Add border for top bar section.
\nSection 2Border Color<\/strong> – Add top bar border color
\nSection 2 Font Color<\/strong> – Add top bar font color – regular and hover color
\nSection 2 Element Space<\/strong> – Controls the space of the section One Element like space between social and tagline.
\nHeader Element Separator<\/strong> – Select if separator needed.
\nSection 2 Font Size<\/strong> – Set the top bar font size.
\nSection 2 Shadow<\/strong> – add shadow to the section<\/p>\n

\"\"<\/p>\n

 <\/p>\n

Section Three Styling<\/h3>\n

Customize Styling for Secondary Header ( Section3 ) – This works for Preset Headers & Custom Header.<\/strong><\/p>\n

Select Section styling options –<\/strong><\/p>\n

Section Height<\/strong> –\u00a0 Controls the<\/span> top bar height
\nSection 3 Padding<\/strong> – Controls the right\/left padding for top bar.<\/span>
\nSection 3 Background Color Option<\/strong>– Select color or gradient for top bar background.
\nSection 3 Border<\/strong> – Add border for top bar section.
\nSection 3Border Color<\/strong> – Add top bar border color
\nSection 3 Font Color<\/strong> – Add top bar font color – regular and hover color
\nSection 3 Element Space<\/strong> – Controls the space of the section One Element like space between social and tagline.
\nHeader Element Separator<\/strong> – Select if separator needed.
\nSection 3 Font Size<\/strong> – Set the top bar font size.
\nSection 3 Shadow<\/strong> – add shadow to the section<\/p>\n

\"\"<\/p>\n

 <\/p>\n

Search Styling<\/h3>\n

Search Font Color<\/strong> – Controls the text color of the Full Screen and expanded Search.
\nSearch Background Color and Opacity<\/strong> – Controls the background color for the Full Screen and expanded Search.
\n<\/span>Note-<\/strong> This works for both Preset Header as well as Custom Header<\/p>\n

\"\"<\/p>\n

 <\/p>\n

Extended Menu Option<\/h3>\n

Full Screen and Horizontal Menu Background<\/strong> – Controls the color of the full screen and horizontal menu background.
\n<\/span>Full Screen Menu Font Color<\/strong> – Controls the Color of the full screen menu font.
\nNote<\/strong>– This works for both Preset Header as well as Custom Header
\n<\/span><\/p>\n

\"\"<\/p>\n

 <\/p>\n

Extended Sidebar Styling<\/h3>\n

Extended Sidebar Position<\/strong> – Controls the Extended Sidebar position.
\nExtended Sidebar Width<\/strong> – Controls the Extended Sidebar Width. In px or %, ex: 100% or 1280px.
\nSidebar Background<\/strong> – Controls the background image, background position, background size, etc for the header.
\nExtended Sidebar Font Color<\/strong> – Controls the font color of the Extended Sidebar.
\nExtended Sidebar Link Color<\/strong> – Controls the link color of the Extended Sidebar.
\nExtended Sidebar Border Color<\/strong> – Controls the Border color of the Extended Sidebar.
\nNote<\/strong>– This works for both Preset Header as well as Custom Header<\/p>\n

\"\"<\/p>\n","protected":false},"excerpt":{"rendered":"

Header Background The following settings work with Preset Header and Custom Header set form Apress Theme options. Set Header Color – Controls the background image, background position, background size, etc for the header. Header Typography – These settings control the…<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[5],"doc_tag":[26],"class_list":["post-101","docs","type-docs","status-publish","hentry","doc_category-theme-options","doc_tag-header-styling-theme-options"],"year_month":"2026-04","word_count":652,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"author_nicename":"tech_ac9x_hlp","author_url":"https:\/\/apressthemes.com\/help\/author\/tech_ac9x_hlp\/"},"doc_category_info":[{"term_name":"Theme Options","term_url":"https:\/\/apressthemes.com\/help\/docs-category\/theme-options\/"}],"doc_tag_info":[{"term_name":"Header Styling - Theme Options","term_url":"https:\/\/apressthemes.com\/help\/docs-tag\/header-styling-theme-options\/"}],"author_list":[{"ID":"2","user_login":"tech_ac9x_hlp","display_name":"Apress Help","id":"2"}],"_links":{"self":[{"href":"https:\/\/apressthemes.com\/help\/wp-json\/wp\/v2\/docs\/101","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/apressthemes.com\/help\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/apressthemes.com\/help\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/apressthemes.com\/help\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/apressthemes.com\/help\/wp-json\/wp\/v2\/comments?post=101"}],"version-history":[{"count":0,"href":"https:\/\/apressthemes.com\/help\/wp-json\/wp\/v2\/docs\/101\/revisions"}],"wp:attachment":[{"href":"https:\/\/apressthemes.com\/help\/wp-json\/wp\/v2\/media?parent=101"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/apressthemes.com\/help\/wp-json\/wp\/v2\/doc_category?post=101"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/apressthemes.com\/help\/wp-json\/wp\/v2\/doc_tag?post=101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}