Customizing the Title Bar - Vanilla Success
<main> <article class="userContent"> <h2 data-id="overview">Overview</h2><p>The Title Bar is an element of the Theme Editor: </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/RR2CNRLVLDAJ/screen-shot-2021-06-28-at-2-39-25-pm.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/RR2CNRLVLDAJ/screen-shot-2021-06-28-at-2-39-25-pm.png" alt="Screen Shot 2021-06-28 at 2.39.25 PM.png" height="916" width="1618" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p> </p><p>It stays pinned to the top as users navigate down the page. During QA you should test the title bar in a variety of states. </p><h2 data-id="theming-the-title-bar">Theming the Title Bar </h2><p>The easiest way to customize the title bar is in the theme editor UI in the Styles Tab. You can get to this tab by clicking the title bar itself or choosing it from the dropdown on the right.</p><p>To theme the title bar in the UI, go to the Dashboard, then Edit your active foundation theme. You can edit the options on the right hand side to personalize the Title Bar to match your branding. </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/CAJJ8WK2ARST/screen-shot-2021-06-28-at-2-39-53-pm.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/CAJJ8WK2ARST/screen-shot-2021-06-28-at-2-39-53-pm.png" alt="Screen Shot 2021-06-28 at 2.39.53 PM.png" height="850" width="1594" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p>This article explores the options available to you in the UI, and expands on some additional options that exist using Theme Variables. Theme Variables are typically updated by theme developers, but may be accessible to fairly technical individuals with a basic knowledge and understanding of CSS. For advanced customizations using <a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#titlebar" rel="nofollow noreferrer ugc">theme variables</a>, a theme developer may be required. </p><h2 data-id="background-color">Background Color</h2><p>You can select a background color for the title bar by either using the color picker or by entering a hex code. </p><p>If you select the “Full Bleed” option (more on this below) the background color will essentially be transparent and show whatever the banner is set to (link to banner docs) when the user is at the top of the page. As the user scrolls down below the banner, it will revert to the background color: </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/GILILE4UKEG5/title-bar-full-bleed-to-background.gif" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/GILILE4UKEG5/title-bar-full-bleed-to-background.gif" alt="title bar full bleed to background.gif" height="464" width="1008" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p>This can also be edited in the <a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#titlebar" rel="nofollow noreferrer ugc">theme variables</a> “Title Bar - Colors”</p><p>You can choose to set a specific Background image rather than a color using <a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#titlebar" rel="nofollow noreferrer ugc">Theme Variables</a> (“Background image”)</p><p>You can also add a background overlay on top of a background image using <a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#titlebar" rel="nofollow noreferrer ugc">Theme Variables</a> (“Background Overlay”)</p><p>Some communities will choose to set a background overlay in black starting at 0.15 opacity to show the title bar over the image. Black is often a good color to choose because it is a nice predictable overlay color. The title bar would transition to our blue brand color once the splash image scrolls away.</p><p>Often, a title bar with the default height of 48px may look a little off in full bleed mode, even though it looks appropriate across the rest of the site. Adding a bit of a background transparency can help to alleviate this.</p><h3 data-id="full-bleed">Full Bleed </h3><p>This example shows the full bleed effect of the title bar (makes it transparent so that users can see the banner color or image beneath). It works especially well if you have a patterned splash image set for your banner. </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/ILQ485Y8184Q/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/ILQ485Y8184Q/image.png" alt="image.png" height="175" width="816" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><h3 data-id="advanced-theme-variables"><strong>Advanced Theme Variables</strong></h3><p>You can get more granular with the full gambit of possible options by using <a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#titlebar" rel="nofollow noreferrer ugc">theme Variables</a> (Titlebar - Full Bleed). Options include the ability to set the opacity of the overlay (if using).</p><h2 data-id="text">Text</h2><p>You can select the text color for the title bar by either using the color picker or by entering a hex code. </p><p>This will only affect the top level links. Nested navigation links will not be affected. </p><p>You can also set this directly in the <a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#titlebar" rel="nofollow noreferrer ugc">theme variables</a> (Foreground/Text Color).</p><h3 data-id="additional-theme-variables"><strong>Additional Theme Variables</strong></h3><p>If you would like to get more granular with your text customizations for the nav bar, you can also edit the Font, Font Family, Alignment, Letter Spacing, Line Height, Text Shadow, Size, Decoration, Weight as well as padding with <a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#titlebar" rel="nofollow noreferrer ugc">Theme Variables. </a></p><h2 data-id="height-height-mobile">Height & Height Mobile</h2><p>You can set the height of the title bar in pixels for desktop and mobile. </p><p>These can also be set via theme variables. </p><h2 data-id="border-style"> Border Style</h2><p>In the theme UI, you can Set the border style to Borderless, bordered or shadowed</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/UZUPFFVVL82E/screen-shot-2021-06-28-at-2-42-18-pm.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/UZUPFFVVL82E/screen-shot-2021-06-28-at-2-42-18-pm.png" alt="Screen Shot 2021-06-28 at 2.42.18 PM.png" height="548" width="1586" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p>You can also set these options using <a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#titlebar" rel="nofollow noreferrer ugc">theme variables. </a></p><h3 data-id="additional-theme-variable-options"><strong>Additional Theme Variable Options</strong></h3><p>Additionally, you can set the border color, radius, style (options of dashed|dotted|double|groove|hidden|inset|none|outset|ridge|solid) and width using <a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#titlebar" rel="nofollow noreferrer ugc">Theme Variables. </a></p><h2 data-id="logo-image">Logo Image</h2><p>Set a logo image manually in the theme editor. If none is set, this will come from your Branding & SEO Settings. </p><p>The logo image dimensions will depend on the size of your Title Bar but we recommend the max height of your logo to be 80px height. </p><h3 data-id="additional-theme-variables-options-(titlebar-logo)"><strong>Additional Theme Variables Options (Titlebar - Logo)</strong></h3><p>You can set the logo’s max width and update the right margin using <a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#titlebar" rel="nofollow noreferrer ugc">theme variables. </a></p><h2 data-id="logo-alignment"> Logo Alignment </h2><p>Choose to place the logo to the left of the title bar </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/T8URDNARFN3Q/screen-shot-2021-06-28-at-2-47-26-pm.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/T8URDNARFN3Q/screen-shot-2021-06-28-at-2-47-26-pm.png" alt="Screen Shot 2021-06-28 at 2.47.26 PM.png" height="294" width="1580" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>Or in the centre of the title bar </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/0UBNCO14VAZB/screen-shot-2021-06-28-at-2-47-38-pm.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/0UBNCO14VAZB/screen-shot-2021-06-28-at-2-47-38-pm.png" alt="Screen Shot 2021-06-28 at 2.47.38 PM.png" height="304" width="1576" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>You can also set the mobile logo image and alignment separately. </p><h2 data-id="edit-logo-destination-url">Edit Logo Destination URL </h2><p>By default, clicking on the logo will send users to the community home page. </p><p>You can set an alternate URL if you would like users to land somewhere else (such as your main site) when clicking on the logo. </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/7KWH883NYOY0/screen-shot-2021-06-28-at-2-48-00-pm.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/7KWH883NYOY0/screen-shot-2021-06-28-at-2-48-00-pm.png" alt="Screen Shot 2021-06-28 at 2.48.00 PM.png" height="736" width="1582" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><h2 data-id="advanced-theming">Advanced Theming</h2><p>Using <a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#titlebar" rel="nofollow noreferrer ugc">Theme variables</a>, you can get much more granular in terms of theming. </p><p>Using theme variables may require developer resources. </p><h3 data-id="banner-swoop">Banner - Swoop</h3><p>Using these theme variables you can create a curved bottom on the Title Bar</p><p>Here is an example of a title bar with the Swoop variables set up: </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/9DG8UEBG5AM1/screen-shot-2021-06-28-at-2-48-24-pm.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/9DG8UEBG5AM1/screen-shot-2021-06-28-at-2-48-24-pm.png" alt="Screen Shot 2021-06-28 at 2.48.24 PM.png" height="286" width="1574" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><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><h3 data-id="title-bar-container-gutter-spacing">Title Bar Container - Gutter Spacing</h3><p>You can set theme variables to affect the gutter spacing for the whole title bar (rather than individual elements above)</p><h3 data-id="nav-alignment">Nav Alignment</h3><p>You can use this variable to align the navigation in the titlebar as left or centre. <strong>Note</strong>: The navigation cannot use center alignment while the logo placement is set to center.</p><h2 data-id="navigation-links">Navigation Links</h2><h2 data-id="editing-navigation-links">Editing Navigation links</h2><p>To edit the links that appear in the title bar, click “Edit” 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/BJF39KDZLHFN/screen-shot-2021-06-28-at-2-51-37-pm.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/BJF39KDZLHFN/screen-shot-2021-06-28-at-2-51-37-pm.png" alt="Screen Shot 2021-06-28 at 2.51.37 PM.png" height="824" width="1586" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p>To edit or delete an existing link, hover over it: </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/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> <p><br></p><p>To reorder or nest links, drag and drop: </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/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> <p><br></p><p>Click apply to preview your results: </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/KCT7H4CK35WX/jun-11-2021-14-15-24.gif" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/KCT7H4CK35WX/jun-11-2021-14-15-24.gif" alt="Jun-11-2021 14-15-24.gif" height="310" width="1212" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2></h2><h2 data-id="additional-navigation-link-options">Additional Navigation link options</h2><p>If you would like your navigation links to appear vertically rather than horizontally, simply nest them in an additional level. </p><p>For example: </p><p> </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><br></p><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> <p><br></p><p> </p><p> </p><p> </p><p> </p><p> </p> </article> </main>