The header includes:
All elements within the header are required, with exception to the location widget. This is optional and can be used to personalise in-page content by location.
Site navigation is automatically included. If you are building an agency page and need to change this, make a copy of the default include, make your changes, and point to your new copy.
The header component can be seen in action at the top of this page. The following are image representations of the header at key SWE breakpoints:
View the full source code for the header component on GitHub.
You may find your page has multiple search fields. To help avoid confusion for users over which search field to use you can minimise the global search field.
Add the following classes to your in-page search form (not the global search form):
qg-site-search__multiple-forms to the parent form elementqg-search-site__input to the search field input, which toggles the visibility of the global search field.<form action="#" role="search" class="qg-site-search__multiple-forms"> <input type="text" class="qg-search-site__input"> </form>