{"id":715,"date":"2026-06-10T03:24:00","date_gmt":"2026-06-10T03:24:00","guid":{"rendered":"https:\/\/docs.wpinterface.com\/?p=715"},"modified":"2026-06-10T03:24:00","modified_gmt":"2026-06-10T03:24:00","slug":"top-bar-configuration-guide","status":"publish","type":"post","link":"https:\/\/docs.wpinterface.com\/top-bar-configuration-guide\/","title":{"rendered":"Top Bar Configuration Guide"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Our theme includes a versatile &#8220;Top Bar&#8221; area \u2014 a thin strip located above the main header. It is the perfect place to display contact information, a secondary menu, social media icons, or important announcements.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Accessing Top Bar Settings<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To configure the Top Bar, navigate to <strong>Appearance \u2192 Customize<\/strong> in your WordPress dashboard, then go to <strong>Header \u2192 Top Bar<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Turn the <strong>Enable Top Bar<\/strong> switch ON to reveal the configuration settings.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">1. Top Bar Layout &amp; Visibility<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Top Bar Width<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Control how the Top Bar aligns with the rest of your site:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Content Width:<\/strong> The content aligns with your main site container. Recommended for most sites.<\/li>\n\n\n\n<li><strong>Full Width:<\/strong> The Top Bar stretches edge-to-edge across the browser window.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Device Visibility<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You can choose exactly which devices should display the Top Bar. Use the dropdown to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Show on All Devices<\/li>\n\n\n\n<li>Hide on Mobile<\/li>\n\n\n\n<li>Hide on Tablet<\/li>\n\n\n\n<li>Hide on Mobile and Tablet<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">2. Top Bar Widgets<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Top Bar is built using a flexible widget system. You can place widgets on the <strong>Left<\/strong> or <strong>Right<\/strong> side of the bar.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How to add content:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Under the <strong>Top Bar Widgets<\/strong> section, click the <strong>Add Widget<\/strong> button.<\/li>\n\n\n\n<li>Choose from the available widgets:<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Text:<\/strong> Perfect for phone numbers, email addresses, or short announcements. <em>(Supports HTML and Dynamic Strings!)<\/em><\/li>\n\n\n\n<li><strong>Nav:<\/strong> Add a secondary navigation menu (you must assign a menu to the Top Bar location in Appearance \u2192 Menus).<\/li>\n\n\n\n<li><strong>Socials:<\/strong> Display social media icons. You can choose between <strong>Minimal<\/strong> or <strong>Rounded<\/strong> styles.<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Once added, you can click the down arrow on the widget to configure it (e.g., adding your phone number).<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Widgets Separator<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If you add multiple widgets to the Top Bar, you can place a stylish divider between them:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>None:<\/strong> No separator.<\/li>\n\n\n\n<li><strong>Regular:<\/strong> A straight vertical line.<\/li>\n\n\n\n<li><strong>Slanted:<\/strong> An angled separator line.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">3. Design Options<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Scroll down to the <strong>Design Options<\/strong> section to style the Top Bar to match your brand.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Background<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Solid Color:<\/strong> Set a flat background color (often a dark color or your primary brand color looks best here).<\/li>\n\n\n\n<li><strong>Gradient:<\/strong> Apply a color gradient.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Font Color<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Text Color:<\/strong> The color of standard text (like your phone number).<\/li>\n\n\n\n<li><strong>Link Color:<\/strong> The color of any clickable links.<\/li>\n\n\n\n<li><strong>Link Hover Color:<\/strong> The color links change to when hovered over.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Border<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Add separation between the Top Bar and the Main Header below it by adding a <strong>Bottom<\/strong> border. You can define the Style, Color, and Width. If you used Widget Separators (above), you can also set the <strong>Separator Color<\/strong> here.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Saving Your Changes<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Once your Top Bar is configured, click the blue <strong>Publish<\/strong> button at the top of the Customizer.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Our theme includes a versatile &#8220;Top Bar&#8221; area \u2014 a thin strip located above the main header. It is the perfect place to display contact information, a secondary menu, social media icons, or important announcements. Accessing Top Bar Settings To configure the Top Bar, navigate to Appearance \u2192 Customize in your WordPress dashboard, then go &hellip; <a href=\"https:\/\/docs.wpinterface.com\/top-bar-configuration-guide\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Top Bar Configuration Guide<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[21],"class_list":["post-715","post","type-post","status-publish","format-standard","hentry","category-general","tag-business-interface"],"_links":{"self":[{"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/posts\/715","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/comments?post=715"}],"version-history":[{"count":1,"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/posts\/715\/revisions"}],"predecessor-version":[{"id":716,"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/posts\/715\/revisions\/716"}],"wp:attachment":[{"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/media?parent=715"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/categories?post=715"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.wpinterface.com\/wp-json\/wp\/v2\/tags?post=715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}