Sections

Content

Layout

Navigation

Headers

The header is contained within the header.hbs template and is displayed on all pages.

Headers typically contains a .navbar element, which allows visitors to navigate your Help Center. Additional elements, for example a link back to the company website, can be easily added.

Although it can be tempting to copy the header from your main website, consider the costs and benefits of doing so. The ongoing effort associated with keeping the two aligned could outweigh the benefit, especially when the same effect can be achieved by copying across only the main branding elements.

Standard headers

Light header with navbar 
  • <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'}}
            {{t 'sign_in' role='menuitem'}}
          {{/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>

The navbar pattern page provides examples of different navbar layouts for both anonymous and signed-in states.

Fixed headers

Headers can be fixed to the top of the page, appearing over page elements (for example, hero sections). In the examples below, the header background color is set to white when the mobile menu is opened.

If the header should only be fixed on specific pages you can apply the necessary styles using CSS or JavaScript.

For example, to fix a header to the top of the page using CSS:

.home-page .header {
  @include fixed-top();
}

Or using JavaScript:

ready(function() {
  if (document.documentElement.classList.contains('.home-page')) {
    var header = document.getElementById('header');
    if (header) {
      header.classList.add('fixed-top');
    }
  }
})

Alternatively, the JavaScript above could be used in the home-page.hbs directly.

Sticky headers

Headers that stick to the top of the page as it’s scrolled can be created using the Sticky plugin.

If the color of your header changes when sticky, using an inline SVG image as your logo along with the .fill-current utility class will ensure that it automatically adapts to match.

The .navbar-light and .navbar-dark classes are applied to the <header> element in order to allow the Sticky plugin to change them based on whether the header is stuck to the top of the screen or not.