The Title Bar 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.
Access Title Bar customization options
Let's learn how to customize your Title Bar using the Theme Editor, accessible via the Dashboard.
- Navigate to and edit your community theme to access the Theme Editor.
- Click the Title Bar in the preview or select Title Bar from the dropdown in the right panel.
This article explores the options available to you in the Theme Editor, as well as some additional options that exist using Theme Variables.
Theme Variables
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.
Background Color
You can update the Title Bar's background color using the color picker or by entering a hex code.
If you check the Full Bleed box, the Title Bar will be transparent (i.e., bleed into your Banner) while at the top of the page. As you scroll below the Banner, it will revert to the set background color, as you see below:
Background Color Theme Variables
- Foreground Color -
titleBar.colors.state.bg - Background Color -
titleBar.colors.bg - Foreground/Text Color -
titleBar.colors.fg
✔️ TIP: 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.
Full Bleed Theme Variables
- Background Color -
titleBar.fullBleed.bgColor - Enabled -
titleBar.fullBleed.enabled - Ending Opacity -
titleBar.fullBleed.endingOpacity
See Theme Variable Reference to learn more.
Text
You can set the text color via the color picker or by entering a hex code.
📝 NOTE: This only affects top-level link text; nested navigation links will not be affected.
Text Theme Variables
Font variables
- Foreground/Text Color -
titleBar.colors.fg - Color -
titleBarNavigation.navLinks.font.color - Letter Spacing -
titleBarNavigation.navLinks.font.letterSpacing - Size -
titleBarNavigation.navLinks.font.size - Text Decoration -
titleBarNavigation.navLinks.font.textDecoration - Transform -
titleBarNavigation.navLinks.font.transform
Padding variables
- Left -
titleBarNavigation.navLinks.padding.left - Right -
titleBarNavigation.navLinks.padding.right
See Theme Variable Reference to learn more.
Height & Height (mobile)
You can set the height of the Title Bar, in pixels, for users viewing your community on both desktop and mobile.
Height Theme Variables
- Height -
titleBar.sizing.height - Height (Mobile) -
titleBar.sizing.mobile.height
See Theme Variable Reference to learn more.
Style
You can set the border style to:
- Borderless
- Bordered
- Shadowed
Style Theme Variables
- Type -
titleBar.border.type - Width -
titleBar.border.width
See Theme Variable Reference to learn more.
Logo
These options allow you to:
- insert a unique custom logo image for both desktop and mobile devices,
- and control its alignment for both desktop and mobile devices.
📝 NOTE: If a logo is not added, it will either be a default logo or come from your Dashboard > Appearance > Branding & SEO settings.
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 80px.
Logo alignment
You can set a left- or center-aligned logo for both desktop and mobile.
Left example
Center example
Edit logo destination URL
- By default, clicking the logo navigates users to the community home page.
- However, you can set a custom URL if you'd like users to land somewhere else (such as your main site).
Logo Theme Variables
- Logo Placement -
titleBar.logo.justifyContent - Max Width -
titleBar.logo.maxWidth- dashed|dotted|double|groove|hidden|inset|none|outset|ridge|solid
- Right Margin -
titleBar.logo.offsetRight
Mobile only
- Max Width -
titleBar.logo.mobile.maxWidth
See Theme Variable Reference to learn more.
Navigation Links
To update the Title Bar's navigation links, click Edit next to Navigation links:
- Click New Link to add your own custom links.
- To edit or delete an existing link, hover over it to access these options:
- To reorder or nest links, drag and drop them:
Additional navigation link options
If you'd like your navigation links to appear vertically rather than horizontally, simply nest them in an additional level.
For example:
Will appear as:
Additional Theme Variables
Banner - Swoop
- Amount -
titleBar.swoop.amount - Offset -
titleBar.swoop.swoopOffset
You can use these variables to give the Title Bar a curved bottom, like in the example below:
Spacing - Title Bar
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.
- Left -
titleBar.spacing.padding.left - Right -
titleBar.spacing.padding.right
Nav Alignment
- Navigation Alignment -
titleBar.navAlignment.alignment
You can use this variable to align the navigation in the Title Bar to left or center.
📝 NOTE: The navigation cannot use center alignment while the logo placement is set to center.
