Canvas Docs

Top Bars

The top bar is the slim strip above the header that carries the things a header is too important for: contact details, social links, a promotion, an announcement. Canvas keeps it separate from the header on purpose, so one bar can serve several headers and a promotion can come and go without anyone touching the header itself.

Turning It On Site Wide

Starting screenCanvasTheme Options, the Header tab, at the Top Bar group.

Turn on Enable Top Bar and choose a Top Bar Content Mode. Default (Menu + Social + Contact) assembles the bar from the phone, email, social and menu settings below it, which is enough for the classic contact strip. Built Top Bar (blocks) hands the bar to a Top Bar record you compose yourself, which is the mode the rest of this page is about. Simple Text / HTML renders one line of text.

The full group, with every colour, border and padding control:

  • Enable Top BarDefaultOff

    Add a thin bar above the main header for announcements, contact info, or custom content.

  • Top Bar Content ModeDefaultDefault (Menu + Social + Contact)

    Default shows a menu, social icons, and contact info. Or display a block-composed Top Bar, or simple text.

    ChoicesDefault (Menu + Social + Contact)Built Top Bar (blocks)Simple Text / HTMLShown when Enable Top Bar is on

  • Default Top BarDefault0

    Select the top bar to display globally. Compose top bars with blocks under Canvas → Top Bars.Manage Top Bars

    Shown when Enable Top Bar is on and Top Bar Content Mode is "Built Top Bar (blocks)"

  • Top Bar TextDefaultEmpty

    Text or HTML displayed inside the top bar. Supports links and inline styles.

    Shown when Enable Top Bar is on and Top Bar Content Mode is "Simple Text / HTML"

  • Phone NumberDefaultEmpty

    Displayed in the top bar with a phone icon. Leave empty to hide.

    Shown when Enable Top Bar is on and Top Bar Content Mode is "Default (Menu + Social + Contact)"

  • Email AddressDefaultEmpty

    Displayed in the top bar with an email icon. Leave empty to hide.

    Shown when Enable Top Bar is on and Top Bar Content Mode is "Default (Menu + Social + Contact)"

  • Top Bar Color SchemeDefaultLight

    Light or dark theme for the top bar area.

    ChoicesLightDarkShown when Enable Top Bar is on

  • Top Bar Background ColorDefaultEmpty

    Fill behind the top bar. Set it when you want the announcement strip to stand apart from the header below it. Leave empty to keep the colour that comes with the top bar scheme.

    Shown when Enable Top Bar is on

  • Top Bar Text ColorDefaultEmpty

    Colour of the text, links and icons inside the top bar. Set it alongside a custom background so the strip keeps enough contrast to read.

    Shown when Enable Top Bar is on

  • Top Bar Bottom BorderDefaultEmpty

    Rule drawn along the bottom edge of the top bar, written as thickness, style and colour, for example 1px solid #eee. Use it to separate the strip from the header below.

    Shown when Enable Top Bar is on

  • Top Bar PaddingDefaultEmpty

    Space inside the top bar, written as the vertical amount then the horizontal one, for example 8px 0. Raise the first value to make the strip taller.

    Shown when Enable Top Bar is on

Composing A Top Bar From Blocks

Starting screenCanvasTop Bars.

Choose Add New and build the bar like any other block content; the editor canvas previews it with the site's real top bar styling. The Canvas Header block category has purpose built pieces for it, such as Top Links, Header Social and Header Info, and the bar takes ordinary blocks too. Publish, then select the record as the Default Top Bar back in Theme Options (the Manage Top Bars link there brings you straight here).

Each Top Bar record carries a small settings box of its own, for decisions that should travel with the bar rather than live in site options:

  • Color Scheme

    Colour scheme for this top bar wherever it is used. Unlike the site-wide option, this travels with the bar through export and import.

  • Transparent

    Drop the top bar background so it sits over a transparent header (adds the transparent-topbar class).

  • Extra Classes

    Additional utility classes for the top bar element, mirroring the Top Bar block's own Extra Classes field.

Per Page Overrides

The Header Settings panel on every page has two top bar controls. Top Bar swaps in a different bar, or None (Disable Top Bar) drops the bar from that page. Top Bar Color Scheme recolours it: Dark adds the dark class on this page only, and it beats both the site wide option and the bar's own setting, so one bar can be light on the front page and dark everywhere else.

A page level selection is also an activation: picking a bar on a page shows it there even while the site wide Enable Top Bar is off, which lets you trial a bar on one page before rolling it out.

A Third Route: The Header Topbar Block

A built header can carry its own bar as a row, using the Canvas Header Topbar block inside the header record. A bar authored this way is part of the header: it renders because it exists, ignores the Enable Top Bar option entirely, and travels with the header wherever it is assigned. Use it when the bar belongs to one specific header design; use the Top Bar record when the bar should be assignable and swappable on its own.

Pitfalls

The three routes interact, and these are the crossings to watch:

  • A top bar shows on one page while the site wide toggle is off. That page's Header Settings selects a bar, and a per page selection enables the bar for that page. Set the page's Top Bar back to Global Default to follow the site again.
  • Turning Enable Top Bar off did not remove a bar. That bar is a Canvas Header Topbar block inside your built header, not the option driven bar. Remove the block from the header record, or use the page level None (Disable Top Bar) to drop it from single pages.
  • The bar's colours look wrong on one page. Check the page's Top Bar Color Scheme: it overrides both the site option and the bar's own Color Scheme, which is easy to forget once set.
  • Default Top Bar is not offered in Theme Options. It appears only while Top Bar Content Mode is Built Top Bar (blocks); in the other modes there is no record to choose.

The header underneath the bar is built in How To Build A Header, and the per page controls the bar shares live in Header Options Per Page.

Was this page helpful?