Overview
The Title Bar is an element of the Theme Editor:
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.
Theming the Title Bar
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.
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.
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 theme variables, a theme developer may be required.
Background Color
You can select a background color for the title bar by either using the color picker or by entering a hex code.
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:
This can also be edited in the theme variables “Title Bar - Colors”
You can choose to set a specific Background image rather than a color using Theme Variables (“Background image”)
You can also add a background overlay on top of a background image using Theme Variables (“Background Overlay”)
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.
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.
Full Bleed
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.
Advanced Theme Variables
You can get more granular with the full gambit of possible options by using theme Variables (Titlebar - Full Bleed). Options include the ability to set the opacity of the overlay (if using).
Text
You can select the text color for the title bar by either using the color picker or by entering a hex code.
This will only affect the top level links. Nested navigation links will not be affected.
You can also set this directly in the theme variables (Foreground/Text Color).
Additional Theme Variables
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 Theme Variables.
Height & Height Mobile
You can set the height of the title bar in pixels for desktop and mobile.
These can also be set via theme variables.
Border Style
In the theme UI, you can Set the border style to Borderless, bordered or shadowed
You can also set these options using theme variables.
Additional Theme Variable Options
Additionally, you can set the border color, radius, style (options of dashed|dotted|double|groove|hidden|inset|none|outset|ridge|solid) and width using Theme Variables.
Logo Image
Set a logo image manually in the theme editor. If none is set, this will come from your Branding & SEO Settings.
The ideal image dimensions are 400px x 300px
Additional Theme Variables Options (Titlebar - Logo)
You can set the logo’s max width and update the right margin using theme variables.
Logo Alignment
Choose to place the logo to the left of the title bar
Or in the centre of the title bar
You can also set the mobile logo image and alignment separately.
Edit Logo Destination URL
By default, clicking on the logo will send users to the community home page.
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.
Advanced Theming
Using Theme variables, you can get much more granular in terms of theming.
Using theme variables may require developer resources.
Banner - Swoop
Using these theme variables you can create a curved bottom on the Title Bar
Here is an example of a title bar with the Swoop variables set up:
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.
Title Bar Container - Gutter Spacing
You can set theme variables to affect the gutter spacing for the whole title bar (rather than individual elements above)
Nav Alignment
You can use this variable to align the navigation in the titlebar as left or centre. Note: The navigation cannot use center alignment while the logo placement is set to center.
Navigation Links
Editing Navigation links
To edit the links that appear in the title bar, click “Edit” next to Navigation links:
To edit or delete an existing link, hover over it:
To reorder or nest links, drag and drop:
Click apply to preview your results:
Additional Navigation link options
If you would like your navigation links to appear vertically rather than horizontally, simply nest them in an additional level.
For example:
Will appear as:
