Customizing The Title Bar - HL Vanilla Community
<main> <article class="userContent"> <p>You customize the title bar in your <code class="code codeInline" spellcheck="false" tabindex="0">variables.json</code> asset or from the <strong>Styles</strong> tab in the theme editor. The following variables are related to the title bar (dots represent nested objects).</p><h3 data-id="basic-customizations">Basic Customizations</h3><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">titleBar.height</code> : The height of the title bar. Defaults to <strong>48px.</strong>.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">titleBar.colors.bg</code> : The background color of the title bar.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">titleBar.colors.fg</code> : The foreground (text) color of the title bar.</li></ul><h3 data-id="advanced-customizations">Advanced Customizations</h3><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">titleBar.navAlignment.alignment</code>: One of <strong>left</strong>, or <strong>center</strong> with a default of <strong>left</strong>.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">titleBar.fullBleed.enabled</code> : Set to <strong>true</strong> to enable a full bleed effect on the homepage where the title bar is transparent against the splash area. This will give your site a nice, modern appearance.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">titleBar.fullBleed.startingOpacity</code> : You can partially show a full bleed title bar by setting this variable to a value greater than zero, but less than one.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">titleBar.fullBleed.bg</code> : You can combine this variable with the starting opacity to have a different color when the title bar is in full bleed mode.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">titleBar.border</code> : This can be a value of <strong>none</strong>, <strong>border</strong>, or <strong>shadow</strong>. To add a border or shadow effect at the bottom of your title bar.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">titleBar.logo.doubleLogoStrategy</code> : If you place a logo in your header you can hide it in the title bar with <strong>hidden</strong>. You can also have the title bar logo appear when the header has scrolled out of view with a value of <strong>fade-in</strong>. The default value is <strong>visible</strong> to always show the logo.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">titleBar.mobileLogo.alignment</code>: Align the logo differently when on mobile. One of <strong>left</strong>, or <strong>center</strong> with a default of <strong>center</strong>.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">navigation.logo.url:</code> Update the URL/link for your title bar logo/</li></ul><h2 data-id="examples">Examples</h2><h3 data-id="basic-title-bar">Basic Title Bar</h3><p>Here is an example of the most basic 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/161/1MT0A2C2VU5F.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/161/1MT0A2C2VU5F.png" alt="Title Bar.png" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><h3 data-id="full-bleed-title-bar">Full Bleed Title Bar</h3><p>This example shows the full bleed effect of the title bar. It works really well with a patterned splash image.</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/667/80O3G098K3RQ.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/667/80O3G098K3RQ.png" alt="Sucess_Community_full_bleed.png" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><h3 data-id="full-bleed-title-bar-with-background-transparency">Full Bleed Title Bar With Background Transparency</h3><p>This example has the same full bleed effect, but starting at black 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. In this case 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><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/121/0ODHV51K02UP.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/121/0ODHV51K02UP.png" alt="Success_Community_transition.png" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2></h2> </article> </main>