Header
Overview
The header includes:
- Queensland Government logo
- portal links bar
- search
- navigation
- location widget.
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.
Default
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:
Large and extra large breakpoints
Medium breakpoint
Small breakpoint
Code
View the full source code for the header component on GitHub.
With a minimised global search field
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 parentform
elementqg-search-site__input
to the search fieldinput
, which toggles the visibility of the global search field.
Code
<form action="#" role="search" class="qg-site-search__multiple-forms"> <input type="text" class="qg-search-site__input"> </form>