Customize the Title Bar - Vanilla Success
<main> <article class="userContent"> <p>The <strong>Title Bar</strong> theme element is "sticky," meaning it stays pinned to the top of the page as users scroll down. This is helpful, as it provides access to some of the most important aspects of your community, like its main navigation options and user-profile options.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/PH0FO4RG3IRC/titlebar-sticky.gif" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/PH0FO4RG3IRC/titlebar-sticky.gif" alt="TitleBar_sticky.gif" height="476" width="988" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="access-title-bar-customization-options">Access Title Bar customization options </h2><p>Let's learn how to customize your Title Bar using the <strong>Theme Editor</strong>, accessible via the Dashboard.</p><ol><li>Navigate to and edit your community theme to access the Theme Editor.</li><li>Click the Title Bar in the preview or select <strong>Title Bar </strong>from the dropdown in the right panel.</li></ol><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/J14JIBDV67A8/access-titlebar-options.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/J14JIBDV67A8/access-titlebar-options.png" alt="access_TitleBar_options.png" height="790" width="1390" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>This article explores the options available to you in the Theme Editor, as well as some additional options that exist using <strong>Theme Variables</strong>.</p><h2 data-id="theme-variables">Theme Variables</h2><p><strong></strong>Theme Variables are typically updated by theme developers, but can possibly also be used by technical individuals with a basic knowledge and understanding of CSS. For advanced customizations using Theme Variables, a theme developer may be required.</p><ul><li><a href="https://success.vanillaforums.com/kb/articles/370#titlebar" rel="nofollow noreferrer ugc">Check out this article</a> to learn how to customize your Title Bar with Theme Variables. </li></ul><h2 data-id="background-color">Background Color</h2><p>You can update the Title Bar's <strong>background color</strong> using the <em>color picker</em> or by entering a<strong> </strong><em>hex code</em>.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/QF029G22BU6U/background-color.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/QF029G22BU6U/background-color.png" alt="background_color.png" height="398" width="1349" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>If you check the <strong>Full Bleed</strong> box, the Title Bar will be transparent (i.e., bleed into your Banner) <em>while at the top of the page</em>. As you scroll below the Banner, it will revert to the set background color, as you see below: </p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/INM937SJ4T9E/titlebar-fullbleed.gif" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/INM937SJ4T9E/titlebar-fullbleed.gif" alt="TitleBar_FullBleed.gif" height="392" width="988" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="background-color-theme-variables">Background Color Theme Variables</h3><ul><li><strong>Foreground Color</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.colors.state.bg</code><strong> </strong></li><li><strong>Background Color</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.colors.bg</code></li><li><strong>Background Image</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.colors.bgImage</code></li><li><strong>Foreground/Text Color</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.colors.fg</code></li><li><strong>Background Overlay</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.overlay.background</code></li></ul><p><strong>✔️ TIP</strong>: For many background colors/images, a background overlay in black starting at 0.15 opacity to show the title bar over the image is a good choice.</p><h3 data-id="full-bleed-theme-variables">Full Bleed Theme Variables</h3><ul><li><strong>Background Color</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.fullBleed.bgColor</code></li><li><strong>Enabled</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.fullBleed.enabled</code></li><li><strong>Ending Opacity</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.fullBleed.endingOpacity</code></li><li><strong>Starting Opacity</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.fullBleed.startingOpacity</code></li></ul><p>See <a href="https://success.vanillaforums.com/kb/articles/370#titlebar" rel="nofollow noreferrer ugc">Theme Variable Reference</a> to learn more.</p><h2 data-id="text">Text</h2><p>You can set the text color via the <em>color picker</em> or by entering a <em>hex code</em>. </p><p><strong>📝 NOTE</strong>: This only affects top-level link text; nested navigation links will not be affected.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/U9U704DXPO0Q/text-color.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/U9U704DXPO0Q/text-color.png" alt="text_color.png" height="371" width="1370" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="text-theme-variables">Text Theme Variables</h3><h4 data-id="font-variables">Font variables</h4><ul><li><strong>Foreground/Text Color</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.colors.fg</code></li><li><strong>Alignment</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBarNavigation.navLinks.font.align</code></li><li><strong>Color</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBarNavigation.navLinks.font.color</code></li><li><strong>Family</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBarNavigation.navLinks.font.family</code></li><li><strong>Letter Spacing</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBarNavigation.navLinks.font.letterSpacing</code></li><li><strong>Line Height</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBarNavigation.navLinks.font.lineHeight</code></li><li><strong>Text Shadow</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBarNavigation.navLinks.font.shadow</code></li><li><strong>Size</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBarNavigation.navLinks.font.size</code></li><li><strong>Text Decoration</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBarNavigation.navLinks.font.textDecoration</code></li><li><strong>Transform</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBarNavigation.navLinks.font.transform</code></li><li><strong>Weight</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBarNavigation.navLinks.font.weight</code></li></ul><h4 data-id="padding-variables">Padding variables</h4><ul><li><strong>All</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBarNavigation.navLinks.padding.all</code></li><li><strong>Bottom</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBarNavigation.navLinks.padding.bottom</code></li><li><strong>Horizontal</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBarNavigation.navLinks.padding.horizontal</code></li><li><strong>Left </strong>- <code class="code codeInline" spellcheck="false" tabindex="0">titleBarNavigation.navLinks.padding.left</code></li><li><strong>Right</strong> -<strong> </strong><code class="code codeInline" spellcheck="false" tabindex="0">titleBarNavigation.navLinks.padding.right</code></li><li><strong>Top </strong>- <code class="code codeInline" spellcheck="false" tabindex="0">titleBarNavigation.navLinks.padding.top</code></li><li><strong>Vertical</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBarNavigation.navLinks.padding.vertical</code></li></ul><p>See <a href="https://success.vanillaforums.com/kb/articles/370#titlebar" rel="nofollow noreferrer ugc">Theme Variable Reference</a> to learn more.</p><h2 data-id="height-height-(mobile)">Height & Height (mobile)</h2><p>You can set the height of the Title Bar, in <strong>pixels</strong>, for users viewing your community on both <strong>desktop </strong>and <strong>mobile</strong>. </p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/8SZO2BRA9KSS/height-height-mobile.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/8SZO2BRA9KSS/height-height-mobile.png" alt="height_height-mobile.png" height="414" width="1347" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="height-theme-variables">Height Theme Variables</h3><ul><li><strong>Height</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.sizing.height</code></li><li><strong>Height</strong> <strong>(Mobile)</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.sizing.mobile.height</code></li></ul><p>See <a href="https://success.vanillaforums.com/kb/articles/370#titlebar" rel="nofollow noreferrer ugc">Theme Variable Reference</a> to learn more.</p><h2 data-id="style">Style</h2><p>You can set the <strong>border style</strong> to:</p><ul><li>Borderless</li><li>Bordered</li><li>Shadowed</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/ZX6Y00S8V10A/border-style.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/ZX6Y00S8V10A/border-style.png" alt="border_style.png" height="494" width="1352" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="style-theme-variables">Style Theme Variables</h3><ul><li><strong>Color</strong>- <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.border.color</code></li><li><strong>Radius</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.border.radius</code></li><li><strong>Style</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.border.style</code><ul><li>dashed|dotted|double|groove|hidden|inset|none|outset|ridge|solid</li></ul></li><li><strong>Type</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.border.type</code></li><li><strong>Width</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.border.width</code></li></ul><p>See <a href="https://success.vanillaforums.com/kb/articles/370#titlebar" rel="nofollow noreferrer ugc">Theme Variable Reference</a> to learn more.</p><h2 data-id="logo">Logo</h2><p>These options allow you to:</p><ul><li>insert a unique <strong>custom logo image </strong>for both <em>desktop</em><strong> </strong>and <em>mobile</em><strong> </strong>devices, </li><li>and control its <strong>alignment </strong>for both <em>desktop</em><strong> </strong>and <em>mobile</em><strong> </strong>devices. </li></ul><p><strong>📝 NOTE</strong>: If a logo is not added, it will either be a default logo or come from your <strong>Dashboard > Appearance > Branding & SEO</strong> settings.</p><p>The recommended logo image dimensions will depend on the size of your Title Bar, but we recommend the max height of your logo to be <strong>80px</strong>.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/JD5OUZ3VF7FX/logo.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/JD5OUZ3VF7FX/logo.png" alt="logo.png" height="683" width="1346" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="logo-alignment"> Logo alignment </h3><p>You can set a left- or center-aligned logo for both desktop and mobile.</p><h4 data-id="left-example">Left example </h4><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/CN36137Q0LY6/logo-leftalign.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/CN36137Q0LY6/logo-leftalign.png" alt="logo_LeftAlign.png" height="301" width="902" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h4 data-id="center-example">Center example </h4><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/MNJYOIXW1DGH/logo-centeralign.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/MNJYOIXW1DGH/logo-centeralign.png" alt="logo_CenterAlign.png" height="303" width="901" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="edit-logo-destination-url">Edit logo destination URL </h3><ul><li>By default, clicking the logo navigates users to the community home page. </li><li>However, you can set a custom URL if you'd like users to land somewhere else (such as your main site).</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/GZNDN0T4WU1J/custom-url.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/GZNDN0T4WU1J/custom-url.png" alt="custom_URL.png" height="637" width="1348" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="logo-theme-variables">Logo Theme Variables</h3><ul><li><strong>Double Logo Strategy </strong>- <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.logo.doubleLogoStrategy</code></li><li><strong>Logo Placement </strong>- <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.logo.justifyContent</code></li><li><strong>Max Width </strong>- <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.logo.maxWidth</code><ul><li>dashed|dotted|double|groove|hidden|inset|none|outset|ridge|solid</li></ul></li><li><strong>Right Margin</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.logo.offsetRight</code></li><li><strong>Width</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.border.width</code></li></ul><h4 data-id="mobile-only">Mobile only</h4><ul><li><strong>Max Width</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.logo.mobile.maxWidth</code></li></ul><p>See <a href="https://success.vanillaforums.com/kb/articles/370#titlebar" rel="nofollow noreferrer ugc">Theme Variable Reference</a> to learn more.</p><h2 data-id="navigation-links">Navigation Links</h2><p>To update the Title Bar's navigation links, click <strong>Edit</strong> next to Navigation links: </p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/78V8SJI0Q9OP/navigation-items.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/78V8SJI0Q9OP/navigation-items.png" alt="navigation_items.png" height="680" width="1202" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <ul><li>Click <strong>New Link</strong> to add your own custom links.</li><li>To <strong>edit </strong>or <strong>delete </strong>an existing link, hover over it to access these options: </li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/9BN6EMTUK6DT/jun-11-2021-14-01-23.gif" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/9BN6EMTUK6DT/jun-11-2021-14-01-23.gif" alt="Jun-11-2021 14-01-23.gif" height="370" width="722" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <ul><li>To reorder or nest links, drag and drop them: </li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/NYTNO30J9S72/jun-11-2021-14-13-37.gif" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/NYTNO30J9S72/jun-11-2021-14-13-37.gif" alt="Jun-11-2021 14-13-37.gif" height="440" width="708" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="additional-navigation-link-options">Additional navigation link options</h3><p>If you'd like your navigation links to appear vertically rather than horizontally, simply nest them in an additional level. </p><p>For example: </p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/8WL6D99JK6FB/screen-shot-2021-06-28-at-3-00-16-pm.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/8WL6D99JK6FB/screen-shot-2021-06-28-at-3-00-16-pm.png" alt="Screen Shot 2021-06-28 at 3.00.16 PM.png" height="976" width="1164" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p> Will appear as:</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/3JAUI09RZUOT/screen-shot-2021-06-28-at-3-00-52-pm.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/3JAUI09RZUOT/screen-shot-2021-06-28-at-3-00-52-pm.png" alt="Screen Shot 2021-06-28 at 3.00.52 PM.png" height="532" width="1304" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="additional-theme-variables">Additional Theme Variables</h2><h3 data-id="banner-swoop">Banner - Swoop</h3><ul><li><strong>Amount </strong>- <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.swoop.amount</code></li><li><strong>Offset </strong>- <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.swoop.swoopOffset</code></li></ul><p>You can use these variables to give the Title Bar a curved bottom, like in the example below:</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/RA3753BRUILI/offset-example.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/RA3753BRUILI/offset-example.png" alt="offset_example.png" height="294" width="1709" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="spacing-title-bar">Spacing - Title Bar </h3><p>Using theme variables, you can set the spacing for all of the Title Bar’s individual spacing such as horizontal or vertical elements or you can set the spacing for the left, right, top and bottom individually.</p><ul><li><strong>All</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.spacing.padding.all</code></li><li><strong>Bottom</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.spacing.padding.bottom</code></li><li><strong>Horizontal</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.spacing.padding.horizontal</code></li><li><strong>Left </strong>- <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.spacing.padding.left</code></li><li><strong>Right</strong> -<strong> </strong><code class="code codeInline" spellcheck="false" tabindex="0">titleBar.spacing.padding.right</code></li><li><strong>Top </strong>- <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.spacing.padding.top</code></li><li><strong>Vertical</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.spacing.padding.vertical</code></li></ul><h3 data-id="title-bar-container-gutter-spacing">Title Bar Container - Gutter Spacing</h3><ul><li><strong>All</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.titleBarContainer.gutterSpacing.all</code></li><li><strong>Bottom</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.titleBarContainer.gutterSpacing.all</code></li><li><strong>Horizontal</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.titleBarContainer.gutterSpacing.all</code></li><li><strong>Left </strong>- <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.titleBarContainer.gutterSpacing.all</code></li><li><strong>Right</strong> -<strong> </strong><code class="code codeInline" spellcheck="false" tabindex="0">titleBar.titleBarContainer.gutterSpacing.all</code></li><li><strong>Top </strong>- <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.titleBarContainer.gutterSpacing.all</code></li><li><strong>Vertical</strong> - <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.titleBarContainer.gutterSpacing.all</code></li></ul><p>You can use these variables to affect the gutter spacing for the <em>entire</em> Title Bar (rather than the individual elements above).</p><h3 data-id="nav-alignment">Nav Alignment</h3><ul><li>Navigation Alignment - <code class="code codeInline" spellcheck="false" tabindex="0">titleBar.navAlignment.alignment</code></li></ul><p>You can use this variable to align the navigation in the Title Bar to <strong>left</strong> or <strong>center</strong>. </p><p><strong>📝 NOTE</strong>: The navigation cannot use center alignment while the logo placement is set to center.</p> </article> </main>