You customize the title bar in your variables.json asset or from the Styles tab in the theme editor. The following variables are related to the title bar (dots represent nested objects).
Basic Customizations
titleBar.height : The height of the title bar. Defaults to 48px..titleBar.colors.bg : The background color of the title bar.titleBar.colors.fg : The foreground (text) color of the title bar.
Advanced Customizations
titleBar.navAlignment.alignment: One of left, or center with a default of left.titleBar.fullBleed.enabled : Set to true 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.titleBar.fullBleed.startingOpacity : You can partially show a full bleed title bar by setting this variable to a value greater than zero, but less than one.titleBar.fullBleed.bg : You can combine this variable with the starting opacity to have a different color when the title bar is in full bleed mode.titleBar.border : This can be a value of none, border, or shadow. To add a border or shadow effect at the bottom of your title bar.titleBar.logo.doubleLogoStrategy : If you place a logo in your header you can hide it in the title bar with hidden. You can also have the title bar logo appear when the header has scrolled out of view with a value of fade-in. The default value is visible to always show the logo.titleBar.mobileLogo.alignment: Align the logo differently when on mobile. One of left, or center with a default of center.navigation.logo.url: Update the URL/link for your title bar logo/
Examples
Basic Title Bar
Here is an example of the most basic title bar.
Full Bleed Title Bar
This example shows the full bleed effect of the title bar. It works really well with a patterned splash image.
Full Bleed Title Bar With Background Transparency
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.
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.
