Link position
All of our themes come with a versatile page header that can be configured using theme settings. Changing the overall position of links within the header is one such simple change that can be made with a single click.
Color
The background color of the header and the color of links within it can be configured using theme settings.
Header type
Fixed headers appear to float above the first hero section (.hero) within the main page content.
Use the Fixed header theme setting to automatically have the header appear fixed on all pages with a hero section.
Use the Sticky header setting to make the header stick to the top of the page when a user scrolls.
The look-and-feel of the header can be changed based on whether it’s stuck to the top of the page or not. For example, a box shadow could be added or the background color changed.
Elements
You can add additional elements to your header by editing the HTML in the header.hbs template. For example, you could add a dynamic Statuspage indicator using our System Status extension.
All of our themes come with a highly customizable page header that you can configure using theme settings. You can change the overall color scheme, layout and add custom links without having to edit the code. Alternatively, you can customize the HTML of the header and add new elements to it by editing the <header> element in the header.hbs template.
The following settings, found within the Header elements setting group, are available in the to use in every theme when customizing the page footer:
| Setting | Description |
|---|---|
| Header layout | The layout to apply to links within the default page footer. |
| Fixed header | Make the header float above hero elements. |
| Sticky header | Make the header stick to the top of the page when a user scrolls. |
| Full-width header | Make the header content span the full width of the screen. |
| Mobile menu layout | The style of mobile navigation menu to display. |
| Mobile menu breakpoint | The screen size at which the mobile menu should become a standard menu. |
| Header height | The height of the page header. |
| Header link color (standard) | The color for link elements in the standard page header. |
| Header link color (fixed) | Color for link elements in the page header when it’s displayed above a hero element. |
| Header background color | The background color to use for the page header. |
| Header link 1 text | The text to display for the first header link. |
| Header link 1 URL | The URL of the first header link. |
| Header link 2 text | The text to display for the second header link. |
| Header link 2 URL | The URL of the second header link. |
| Header link 3 text | The text to display for the third header link. |
| Header link 3 URL | The URL of the third header link. |
| Submit a Request link | Show a Submit a Request link. |
| Category list style | The style of category list to show in the header. |
