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