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.

In many instances, the primary purpose of a header is to allow visitors to find their way around the Help Center. The header of your Zendesk theme is contained within the header.hbs page template and by default only includes elements required by every Help Center:

  • The logo specified in theme settings.
  • A Community link if Community functionality (Zendesk Gather) is enabled.
  • A Submit a Request link for users that can submit new requests through the Help Center.
  • A Sign in link if the current user is not already signed in; or
  • A user avatar and dropdown menu containing links to the My Activities and Profile pages.
  • <header class="header bg-white border-bottom" id="header">
      <nav class="navbar navbar-light font-size-md container" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
        {{#link 'help_center' class='navbar-brand mr-auto'}}
          <img class="block img-fluid h-6" id="logo" src="{{settings.logo}}" alt="{{t 'home_page' name=help_center.name}}">
        {{/link}}
        <button class="navbar-toggle ml-2" data-toggle="collapse" data-target="#primary-nav" aria-controls="primary-nav" aria-expanded="false" aria-label="{{t 'toggle_navigation'}}">
          <span></span>
        </button>
        <ul class="nav nav-menu text-center collapse md:flex" role="menu" id="primary-nav">
          {{#if help_center.community_enabled}}
          <li class="nav-item">
            {{link 'community' class='nav-link' role='menuitem'}}
          </li>
          {{/if}}
          <li class="nav-item">
            {{link 'new_request' class='nav-link' role='menuitem'}}
          </li>
          {{#unless signed_in}}
            <li class="nav-item">
              {{#link "sign_in" class='button button-outline-primary my-3 md:my-0 md:ml-3' role='menuitem'}}
                {{t 'sign_in'}}
              {{/link}}
            </li>
          {{/unless}}
        </ul>
        {{#if signed_in}}
          <div class="user-info dropdown">
            <button class="not-a-button dropdown-toggle inline-flex align-items-center" aria-haspopup="true">
              {{user_avatar class="user-avatar ml-2 h-6 w-6 circle"}}
              <span class="nav-link pl-2 pr-0 hidden md:inline-block">
                {{user_name}}
                <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 12 12" aria-hidden="true">
                  <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
                </svg>
              </span>
            </button>
            <div class="dropdown-menu" role="menu">
              {{link "my_activities" class='dropdown-item' role="menuitem"}}
              {{my_profile class='dropdown-item' role="menuitem"}}
              {{change_password class='dropdown-item' role="menuitem"}}
              {{link "sign_out" class='dropdown-item'  role="menuitem"}}
            </div>
          </div>
        {{/if}}
      </nav>
    </header>

We recommend either making changes to the default header or copying one directly from the Pattern Library. Start simple and only add elements when they can be shown to be of value to your visitors.

Updating your theme header

Changing the layout

The Pattern Library contains a variety of different page header and navbar layout options.

For example, you can use .flex-1 on the .nav-menu element to have it occupy as much space as possible, resulting in the navigation links being displayed on the left-hand side.

  • <header class="header bg-white border-bottom" id="header">
      <nav class="navbar navbar-light container" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
        {{#link 'help_center' class='navbar-brand mr-2'}}
          <img class="block img-fluid h-6" id="logo" src="{{settings.logo}}" alt="{{t 'home_page' name=help_center.name}}">
        {{/link}}
        <button class="navbar-toggle ml-2" data-toggle="collapse" data-target="#primary-nav" aria-controls="primary-nav" aria-expanded="false" aria-label="Toggle navigation menu">
          <span></span>
        </button>
        <ul class="nav nav-menu flex-1 text-center collapse md:flex" role="menu" id="primary-nav">
          {{#if help_center.community_enabled}}
            <li class="nav-item">
              {{link 'community' class='nav-link' role='menuitem'}}
            </li>
          {{/if}}
          <li class="nav-item">
            {{link 'new_request' class='nav-link' role='menuitem'}}
          </li>
          {{#unless signed_in}}
            <li class="nav-item">
              {{#link "sign_in" class='nav-link' role='menuitem'}}
                {{t 'sign_in'}}
              {{/link}}
            </li>
          {{/unless}}
        </ul>
        {{#if signed_in}}
          <div class="user-info dropdown">
            <button class="not-a-button dropdown-toggle inline-flex align-items-center" aria-haspopup="true">
              {{user_avatar class="user-avatar ml-2 h-6 w-6 circle"}}
              <span class="nav-link pl-2 pr-0 hidden md:inline-block">
                {{user_name}}
                <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 12 12" aria-hidden="true">
                  <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
                </svg>
              </span>
            </button>
            <div class="dropdown-menu" role="menu">
              {{link "my_activities" class='dropdown-item' role="menuitem"}}
              {{my_profile class='dropdown-item' role="menuitem"}}
              {{change_password class='dropdown-item' role="menuitem"}}
              {{link "sign_out" class='dropdown-item'  role="menuitem"}}
            </div>
          </div>
        {{/if}}
      </nav>
    </header>

Or make the header itself stick to the top of the page as it’s scrolled using the Sticky plugin:

  • <header class="header bg-white border-bottom transition-fast" id="header" data-element="sticky" data-offset="20" data-class-names='{ "sticky": "sticky-top", "stuck": "shadow-sm" }'>
      <nav class="navbar navbar-light container" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement" aria-label="Primary navigation">
        {{#link 'help_center' class='navbar-brand mr-auto'}}
          <img class="block img-fluid h-6" id="logo" src="{{settings.logo}}" alt="{{t 'home_page' name=help_center.name}}">
        {{/link}}
        <button class="navbar-toggle ml-2" data-toggle="collapse" data-target="#primary-nav" aria-controls="primary-nav" aria-expanded="false" aria-label="Toggle navigation">
          <span></span>
        </button>
        <ul class="nav nav-menu text-center collapse md:flex" role="menu" id="primary-nav">
          <li class="nav-item">
            <a class="nav-link" href="#" role="menuitem">
              Back to website
            </a>
          </li>
          <li class="nav-item">
            {{link 'new_request' class='button button-outline-primary my-4 md:my-0' role='menuitem'}}
          </li>
          {{#unless signed_in}}
            <li class="nav-item">
              {{#link "sign_in" class='nav-link' role='menuitem'}}
                {{t 'sign_in'}}
              {{/link}}
            </li>
          {{/unless}}
        </ul>
        {{#if signed_in}}
          <div class="user-info dropdown">
            <button class="not-a-button dropdown-toggle inline-flex align-items-center" aria-haspopup="true">
              {{user_avatar class="user-avatar ml-2 h-6 w-6 circle"}}
              <span class="nav-link pl-2 pr-0 hidden md:inline-block">
                {{user_name}}
                <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 12 12" aria-hidden="true">
                  <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
                </svg>
              </span>
            </button>
            <div class="dropdown-menu" role="menu">
              {{link "my_activities" class='dropdown-item' role="menuitem"}}
              {{my_profile class='dropdown-item' role="menuitem"}}
              {{change_password class='dropdown-item' role="menuitem"}}
              {{link "sign_out" class='dropdown-item'  role="menuitem"}}
            </div>
          </div>
        {{/if}}
      </nav>
    </header>

Although your header is displayed on all pages, it can be customized to look or behave differently on specific pages if required.

Adding elements

A common customization is to add a link back to their main website. This can be achieved easily by adding a .nav-item and .nav-link within your primary navigation menu:

<ul class="nav nav-menu text-center collapse md:flex" role="menu" id="primary-nav">
  ...
  <li class="nav-item">
    <a class="nav-link" href="https://www.mywebsite.com">
      Back to website
    </a>
  </li>
</ul>

Links within your header can also be styled using our elements and utilities.

For example, you can apply our button styles to links to have them standout and even adorn them with icons:

  • <header class="header bg-white border-bottom" id="header">
      <nav class="navbar navbar-light font-size-md container" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
        {{#link 'help_center' class='navbar-brand mr-auto'}}
          <img class="block img-fluid h-6" id="logo" src="{{settings.logo}}" alt="{{t 'home_page' name=help_center.name}}">
        {{/link}}
        <button class="navbar-toggle ml-2" data-toggle="collapse" data-target="#primary-nav" aria-controls="primary-nav" aria-expanded="false" aria-label="{{t 'toggle_navigation'}}">
          <span></span>
        </button>
        <ul class="nav nav-menu text-center collapse md:flex" role="menu" id="primary-nav">
          <li class="nav-item">
            <a class="nav-link" href="#" role="menuitem">
              <svg class="svg-icon fill-current mr-1" viewBox="0 0 423 323" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <path d="M423,162 C423,174 413,184 401,184 L76,184 L177,286 C186,294 186,308 177,317 C173,321 167,323 161,323 C156,323 150,321 146,317 L7,178 C-2,169 -2,155 7,146 L146,7 C155,-2 169,-2 177,7 C186,16 186,30 177,39 L76,140 L401,140 C413,140 423,150 423,162 Z"></path>
              </svg> Back to website
            </a>
          </li>
          {{#if help_center.community_enabled}}
              <li class="nav-item">
                {{link 'community' class='nav-link' role='menuitem'}}
              </li>
          {{/if}}
          <li class="nav-item">
            {{link 'new_request' class='nav-link' role='menuitem'}}
          </li>
          {{#unless signed_in}}
            <li class="nav-item">
              {{#link "sign_in" class='button button-outline-primary my-3 md:my-0 md:ml-3' role='menuitem'}}
                {{t 'sign_in'}}
              {{/link}}
            </li>
          {{/unless}}
        </ul>
        {{#if signed_in}}
          <div class="user-info dropdown">
            <button class="not-a-button dropdown-toggle inline-flex align-items-center" aria-haspopup="true">
              {{user_avatar class="user-avatar ml-2 h-6 w-6 circle"}}
              <span class="nav-link pl-2 pr-0 hidden md:inline-block">
                {{user_name}}
                <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 12 12" aria-hidden="true">
                  <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
                </svg>
              </span>
            </button>
            <div class="dropdown-menu" role="menu">
              {{link "my_activities" class='dropdown-item' role="menuitem"}}
              {{my_profile class='dropdown-item' role="menuitem"}}
              {{change_password class='dropdown-item' role="menuitem"}}
              {{link "sign_out" class='dropdown-item'  role="menuitem"}}
            </div>
          </div>
        {{/if}}
      </nav>
    </header>

When adding additional elements to your page header we recommend weighing the pros and cons as less is often more.

Sometimes it might not be possible or appropriate to carry across elements from your main website (for example, an interactive shopping cart). In other cases doing so may represent an administrative or ongoing maintenance burden (for example, keeping links in-sync between your website and the Help Center).

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.

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 added by our framework:

<!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