Sections

Customize the header

When branding your new Zendesk theme, it’s important to get the page header as it’s the first thing that visitors to your Help Center will see.

The header of your Zendesk theme is contained within the header.hbs page template and includes the following elements by default:

  • Your company logo
  • Submit a Request link
  • Community link (if the Community is enabled)
  • Sign in link (if not signed in)
  • User avatar and name (if signed in)
  • My activities link (if signed in)
  • My profile link (if signed in)

Many customers also choose to add a link to their main company website or a site-wide search bar. Additional elements can be carried across from your company website however, as we’ll see, the benefits of such an approach should be weighed against the costs.

Things to consider

Depending on the nature of your business, your may be tempted to replicate your main company website header in your Zendesk Help Center. In some instances this may be appropriate, but you should consider the following:

  1. Are the elements within my main website header suitable for the Help Center?

    If you run an online store and have links to product pages and a shopping cart in your page header, is that going to be helpful or distracting to customers looking for answers in your Help Center?

  2. Will copying elements from my main website add to ongoing maintenance?

    If your main website header changes often, is time spent keeping your Help Center’s header in-sync worthwhile? Elements like shopping carts may require time to set up and maintain and mega-menus with products links can often be replaced with a static link to your store, which is both easy to implement and less confusing for your visitors.

A good compromise is often to simply copy the style of your main website header. Visitors will know that they’re still browsing a page that belongs to your company and it will be clear that the purpose of the page is for them to get answers to their questions. A link back to the main website in the header will allow visitors to easily find their way back, if required.

You and your team can rest assured that you have a branded, yet independent, website dedicated to serving your valuable customers without having to constantly worry about keeping the pages in-sync.

Choose a layout

In many instances, the primary purpose of a header is to allow visitors to find their way around the Help Center.

The Headers section of our Pattern Library contains some common header layout options, including headers that stick to the top of the page or float above important content like a hero image. Although your header is displayed on all pages, it can be customized to look or behave differently on specific pages if required.

Update the header

All of your header layout changes will occur within the header.hbs template.

We recommend either starting with a theme that meets your header requirements or copying one directly from another theme or the Pattern Library. Start simple and only add elements when they can be shown to be of value to your visitors.

Make page-specific changes

All of our themes automatically add page-based class names to the top-most <html> element of each page so that you can have common elements like the page header look or behave differently on different pages. The class names added to the <html> element are always the name of the page template in snake case (each space replaced by an underscore with all letters in lowercase).

For example, on the Home page the <html> element has a class name of .home-page:

<!DOCTYPE html>
<html class="home-page" dir="ltr" lang="en-US">
  ...
</html>

To change the color of links in the header to red only on the Home page, you could add the following custom CSS to your theme’s style.css stylesheet:

.home-page .header a {
  color: red;
}

Questions or feedback about this guide? Let us know