The header area is displayed at the top of every page. It contains site-wide components like the logo, top utility menu, site navigation and search.
Site Logo
The site logo is displayed in the top left of the header. It acts as a link to the homepage. Pick the image you would like to use in the "Site Logo" picker in the subsite configuration.
Top Utility Menu
The top utility menu is used to hold links to important pages on the site. These could include links to accessibility information or the site's login article. Links in this menu are styled as buttons which, on mouseover, use a contrasting colour rather than an underline.
The items displayed in this menu are links to the child articles of the article selected in the "Top utilities article" picker in the subsite configuration. The top utility article is normally turned off so that it doesn't appear in the site navigation and breadcrumb.
Care should be taken over the number of articles that appear here. The menu will wrap onto further rows to accommodate a large number of items.
Site Menu
The site menu displays a link to each article that is a child of the home article. Each link uses the article's best link text.
If a menu item has child articles beneath it, an arrow appears to the right of the text. Clicking the menu text or arrow causes the menu to expand, displaying links to the second level articles.
If a menu item does not have child articles, the best link text acts as a direct link to that article.
Second Level Menu Drop-downs
As described above, should a top level menu item have child articles, these are displayed when the menu item is clicked.
All child articles are displayed in a single column, with no limit to the number that can be included. The text of each menu item uses the corresponding article's best link text. Clicking an item will navigate to that page.
In the Subsite Settings you can choose whether or not a final "view all" menu item is added, linking to the parent/top menu item.
Top Search Box
At full width, a magnifying glass icon appears to the right of the site menu. Clicking this icon replaces the menu with a search box. The box contains the default placeholder text "Find...".
If search suggestions are enabled, up to four content suggestions are shown once three characters have been typed into the box. This list of suggestions is updated as further characters are entered. Selecting a suggestion will take the user directly to that content.
A search will be performed using the content of the box if a user presses the enter key or clicks on the search icon.
When a user performs a search, the results are displayed on an article using the search template. Pick your site's main search article using the article picker in the subsite configuration.
For full details of the search functionality, see the Search article.
On the Home template, the search may appear as a panel rather than in the header.
Site Alert
Beneath the main header content an optional site alert can be displayed. If enabled this alert will appear on every page of the site.
To turn the alert on, select an article in the "Site Alert article" picker in the Subsite Settings. To turn it off, remove the article.
The alert always displays the heading of the article you've picked. If the article has summary or introductory text, this will appear below the heading, and the heading will act as a link to the full article. If the article doesn't have summary or intro text, the body text will be output (which can include inlines) and the heading won't act as a link.
Sticky Header
The header can be configured to be "sticky". When enabled the header, minus the site alert, will remain visible at the top of the page as the user scrolls down the page content. To make the header sticky, set the "Sticky header" option to "Yes" in the subsite configuration.
Mobile Menu
At screen widths below 1051 pixels the top utility menu, site menu and site search are combined into a single menu icon, which appears in the top right of the header.
Menu items without child articles act as links to their corresponding articles.
Menu items with child articles are displayed with an arrow to their right. Clicking the menu item will take the user to that article. Clicking the arrow reveals the child articles in an accordion style menu.
Clicking the "X" icon in the top right of the menu closes it, returning the view to its previous state.
Share this page
