The Ontario header is mandatory for all web pages and applications in the Ontario ecosystem. It shows users that they are on an official Ontario site and unifies Ontario’s web presence.
@import "../../../theme/assets/styles/sass/variables-import";
@import "../../../theme/assets/styles/sass/tools/focus.placeholder";
.ontario-header {
position: relative;
background-color: $ontario-colour-black;
color: $ontario-colour-white;
display: flex;
align-items: center;
height: 5.75rem;
.ontario-row {
display: flex;
align-items: center;
justify-content: flex-end;
}
svg {
width: $spacing-6;
height: $spacing-6;
margin-bottom: $spacing-0;
}
}
.ontario-header__logo-container {
height: 46px;
}
.ontario-header__logo-container a {
display: inline-block;
height: 100%;
&:focus {
box-shadow: 0 0 0 $global-radius $ontario-colour-focus;
}
}
/* Header search styles */
.ontario-header__search-container {
position: relative;
display: none;
@media screen and (min-width: $medium-breakpoint) {
display: flex;
}
@media screen and (min-width: $small-breakpoint) {
padding-right: calc(2rem / 2);
}
}
.ontario-header__search-input.ontario-input {
border-width: 0;
margin-bottom: $spacing-0;
height: 48px;
padding-left: $spacing-3;
padding-right: 7.2rem;
&:focus {
& ~ .ontario-header__search-submit {
background-color: $ontario-colour-link;
color: $ontario-colour-white;
&:hover {
background-color: $ontario-colour-link--hover;
color: $ontario-colour-white;
}
}
}
// Remove auto X icon for IE and Edge on input area
&::-ms-clear {
display: none;
width: 0;
height: 0;
}
// Remove red outline around input area on Firefox
&:invalid:focus {
box-shadow: 0 0 0 4px $ontario-colour-focus;
-moz-box-shadow: none;
}
&:invalid:not(:focus) {
box-shadow: none;
-moz-box-shadow: none;
}
@media screen and (min-width: $small-breakpoint) and (max-width: $medium-breakpoint) {
padding-left: $spacing-4;
padding-right: 6.4rem;
}
}
.ontario-header__search-submit {
border: 0;
border-radius: 0 3px 3px 0;
background-color: $ontario-greyscale-5;
color: $ontario-colour-black;
display: flex;
justify-content: center;
align-items: center;
font-family: "Open Sans", sans-serif;
font-weight: 600;
font-size: 1.125rem;
height: 100%;
line-height: 1.56;
position: absolute;
right: $spacing-4;
top: $spacing-0;
cursor: pointer;
padding-left: $spacing-3;
padding-right: $spacing-3;
&:hover {
background-color: $ontario-colour-link--hover;
color: $ontario-colour-white;
}
&:focus {
outline: none;
box-shadow: 0 0 0 $global-radius $ontario-colour-focus;
background-color: $ontario-colour-link--hover;
color: $ontario-colour-white;
}
&:active {
background-color: $ontario-colour-link--active;
color: $ontario-colour-white;
}
svg {
margin-right: $spacing-0;
}
}
.ontario-header__search-clear-input {
position: absolute;
display: flex;
align-items: center;
right: 4.5rem;
top: 0;
height: 100%;
background-color: transparent;
color: black;
outline: none;
border: none;
cursor: pointer;
margin: $spacing-0;
padding: $spacing-2;
svg {
width: $spacing-5;
height: $spacing-5;
}
&:focus {
svg {
box-shadow: 0 0 0 $global-radius $ontario-colour-focus;
}
}
}
.ontario-header__search-clear-input--hide {
display: none;
}
/* Header menu & language toggle & close search button styles */
.ontario-header__nav-right-container {
display: flex;
align-items: center;
justify-content: flex-end;
}
/* Header buttons */
.ontario-header-button {
background-color: $ontario-colour-black;
border: none;
border-radius: $global-radius;
box-sizing: border-box;
box-shadow: none;
color: $ontario-colour-white;
cursor: pointer;
display: flex;
align-items: center;
font-size: 1.125rem;
font-weight: 600;
font-family: $ontario-font-open-sans;
height: 48px;
line-height: calc(14 / 9);
text-align: center;
text-decoration: none;
&:focus {
@extend %ontario-focus;
}
&:hover,
&:focus,
&:visited {
color: $ontario-colour-white;
}
}
.ontario-header-button--with-outline,
.ontario-header-button--without-outline {
background-color: $ontario-colour-black;
color: $ontario-colour-white;
&:hover {
background-color: $ontario-greyscale-70;
}
&:active {
background-color: $ontario-greyscale-60;
}
}
.ontario-header-button--with-outline {
border: 2px solid $ontario-colour-white;
margin: $spacing-0 $spacing-0 $spacing-0 $spacing-4;
padding: calc(#{$spacing-3} / 2) $spacing-4;
&:hover {
border: 2px solid $ontario-colour-white;
color: $ontario-colour-white;
}
&:focus {
background-color: $ontario-greyscale-70;
}
}
.ontario-header-button--without-outline {
&:focus {
background-color: $ontario-colour-black;
}
}
.ontario-header__menu-toggler {
padding: calc(#{$spacing-3} / 2) $spacing-4;
@media screen and (max-width: $xsmall-breakpoint) {
padding-left: $spacing-2;
padding-right: $spacing-2;
}
span {
display: flex;
@media screen and (max-width: $xsmall-breakpoint) {
display: none;
}
}
svg {
margin-right: 6px;
@media screen and (max-width: $xsmall-breakpoint) {
margin-right: 0;
}
}
}
.ontario-header__language-toggler {
padding: $spacing-3;
abbr[title] {
text-decoration: none;
}
}
.ontario-header__search-toggler {
padding: $spacing-2 $spacing-3;
margin-left: $spacing-4;
svg {
@media screen and (min-width: $small-breakpoint) {
margin-right: 4px;
}
}
}
.ontario-header__search-close {
flex-direction: column-reverse;
font-weight: 400;
margin-right: $spacing-4;
padding: calc(#{$spacing-5} / 10) $spacing-1;
position: relative;
height: 60px;
display: none;
span {
position: relative;
top: -3px;
font-size: 1rem;
margin-left: $spacing-0;
@media screen and (min-width: 39.9375em) {
margin-right: 4px;
}
&:hover,
&:focus {
outline: none;
text-decoration: none;
}
}
svg {
top: 0;
}
@media screen and (min-width: $small-breakpoint) {
flex-direction: row;
padding: $spacing-1 $spacing-2 $spacing-1 $spacing-4;
height: 48px;
span {
top: 0;
}
svg {
position: relative;
width: $spacing-7;
height: $spacing-7;
}
}
}
.ontario-header--search-open .ontario-header__search-close {
@media screen and (min-width: $medium-breakpoint) {
display: none;
}
}
.ontario-header__search-close-container {
display: none;
justify-content: flex-end;
padding-right: 0;
@media screen and (max-width: $small-breakpoint) {
width: auto;
padding-left: 0;
padding-right: 0;
}
}
@media screen and (max-width: $medium-breakpoint) {
.ontario-header--search-open .ontario-header__logo-container,
.ontario-header--search-open .ontario-header__nav-right-container {
display: none;
}
.ontario-header--search-open .ontario-header__search-close-container,
.ontario-header--search-open .ontario-header__search-container,
.ontario-header--search-open .ontario-header__search-close {
display: flex;
}
}
.ontario-header-navigation--open {
overflow: hidden;
.ontario-overlay {
display: block;
}
.ontario-header-navigation--open {
height: 100vh;
}
}
.ontario-header-button:focus{box-shadow:0 0 0 4px #009adb;outline:4px solid transparent;-webkit-transition:box-shadow .1s ease-in-out;transition:box-shadow .1s ease-in-out}.ontario-header{position:relative;background-color:#1a1a1a;color:#fff;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;height:5.75rem}.ontario-header .ontario-row{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end}.ontario-header svg{width:2rem;height:2rem;margin-bottom:0}.ontario-header__logo-container{height:46px}.ontario-header__logo-container a{display:inline-block;height:100%}.ontario-header__logo-container a:focus{box-shadow:0 0 0 4px #009adb}.ontario-header__search-container{position:relative;display:none}@media screen and (min-width: 73em){.ontario-header__search-container{display:-webkit-box;display:-webkit-flex;display:flex}}@media screen and (min-width: 40em){.ontario-header__search-container{padding-right:calc(2rem / 2)}}.ontario-header__search-input.ontario-input{border-width:0;margin-bottom:0;height:48px;padding-left:.75rem;padding-right:7.2rem}.ontario-header__search-input.ontario-input:focus~.ontario-header__search-submit{background-color:#06c;color:#fff}.ontario-header__search-input.ontario-input:focus~.ontario-header__search-submit:hover{background-color:#00478f;color:#fff}.ontario-header__search-input.ontario-input::-ms-clear{display:none;width:0;height:0}.ontario-header__search-input.ontario-input:invalid:focus{box-shadow:0 0 0 4px #009adb;-moz-box-shadow:none}.ontario-header__search-input.ontario-input:invalid:not(:focus){box-shadow:none;-moz-box-shadow:none}@media screen and (min-width: 40em)and (max-width: 73em){.ontario-header__search-input.ontario-input{padding-left:1rem;padding-right:6.4rem}}.ontario-header__search-submit{border:0;border-radius:0 3px 3px 0;background-color:#f2f2f2;color:#1a1a1a;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;align-items:center;font-family:"Open Sans",sans-serif;font-weight:600;font-size:1.125rem;height:100%;line-height:1.56;position:absolute;right:1rem;top:0;cursor:pointer;padding-left:.75rem;padding-right:.75rem}.ontario-header__search-submit:hover{background-color:#00478f;color:#fff}.ontario-header__search-submit:focus{outline:none;box-shadow:0 0 0 4px #009adb;background-color:#00478f;color:#fff}.ontario-header__search-submit:active{background-color:#002142;color:#fff}.ontario-header__search-submit svg{margin-right:0}.ontario-header__search-clear-input{position:absolute;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;right:4.5rem;top:0;height:100%;background-color:transparent;color:#000;outline:none;border:none;cursor:pointer;margin:0;padding:.5rem}.ontario-header__search-clear-input svg{width:1.5rem;height:1.5rem}.ontario-header__search-clear-input:focus svg{box-shadow:0 0 0 4px #009adb}.ontario-header__search-clear-input--hide{display:none}.ontario-header__nav-right-container{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end}.ontario-header-button{background-color:#1a1a1a;border:none;border-radius:4px;box-sizing:border-box;box-shadow:none;color:#fff;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;font-size:1.125rem;font-weight:600;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;height:48px;line-height:calc(14 / 9);text-align:center;text-decoration:none}.ontario-header-button:hover,.ontario-header-button:focus,.ontario-header-button:visited{color:#fff}.ontario-header-button--with-outline,.ontario-header-button--without-outline{background-color:#1a1a1a;color:#fff}.ontario-header-button--with-outline:hover,.ontario-header-button--without-outline:hover{background-color:#4d4d4d}.ontario-header-button--with-outline:active,.ontario-header-button--without-outline:active{background-color:#666}.ontario-header-button--with-outline{border:2px solid #fff;margin:0 0 0 1rem;padding:calc(0.75rem / 2) 1rem}.ontario-header-button--with-outline:hover{border:2px solid #fff;color:#fff}.ontario-header-button--with-outline:focus{background-color:#4d4d4d}.ontario-header-button--without-outline:focus{background-color:#1a1a1a}.ontario-header__menu-toggler{padding:calc(0.75rem / 2) 1rem}@media screen and (max-width: 20em){.ontario-header__menu-toggler{padding-left:.5rem;padding-right:.5rem}}.ontario-header__menu-toggler span{display:-webkit-box;display:-webkit-flex;display:flex}@media screen and (max-width: 20em){.ontario-header__menu-toggler span{display:none}}.ontario-header__menu-toggler svg{margin-right:6px}@media screen and (max-width: 20em){.ontario-header__menu-toggler svg{margin-right:0}}.ontario-header__language-toggler{padding:.75rem}.ontario-header__language-toggler abbr[title]{text-decoration:none}.ontario-header__search-toggler{padding:.5rem .75rem;margin-left:1rem}@media screen and (min-width: 40em){.ontario-header__search-toggler svg{margin-right:4px}}.ontario-header__search-close{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-webkit-flex-direction:column-reverse;flex-direction:column-reverse;font-weight:400;margin-right:1rem;padding:calc(1.5rem / 10) .25rem;position:relative;height:60px;display:none}.ontario-header__search-close span{position:relative;top:-3px;font-size:1rem;margin-left:0}@media screen and (min-width: 39.9375em){.ontario-header__search-close span{margin-right:4px}}.ontario-header__search-close span:hover,.ontario-header__search-close span:focus{outline:none;text-decoration:none}.ontario-header__search-close svg{top:0}@media screen and (min-width: 40em){.ontario-header__search-close{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;flex-direction:row;padding:.25rem .5rem .25rem 1rem;height:48px}.ontario-header__search-close span{top:0}.ontario-header__search-close svg{position:relative;width:2.5rem;height:2.5rem}}@media screen and (min-width: 73em){.ontario-header--search-open .ontario-header__search-close{display:none}}.ontario-header__search-close-container{display:none;-webkit-box-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding-right:0}@media screen and (max-width: 40em){.ontario-header__search-close-container{width:auto;padding-left:0;padding-right:0}}@media screen and (max-width: 73em){.ontario-header--search-open .ontario-header__logo-container,.ontario-header--search-open .ontario-header__nav-right-container{display:none}.ontario-header--search-open .ontario-header__search-close-container,.ontario-header--search-open .ontario-header__search-container,.ontario-header--search-open .ontario-header__search-close{display:-webkit-box;display:-webkit-flex;display:flex}}.ontario-header-navigation--open{overflow:hidden}.ontario-header-navigation--open .ontario-overlay{display:block}.ontario-header-navigation--open .ontario-header-navigation--open{height:100vh}
Guiding principle: Be consistent.
The header provides:
There are three main header options to choose from:
The default header should include:
Only ontario.ca will include a search bar and menu in the default header.
The ontario.ca header includes:
The Ontario.ca header requires the following two JavaScript files:
The expanded header will contain a secondary bar under the black bar that includes:
The expanded header will allow for a slightly smaller Ontario logo and black bar size to show a visual hierarchy to the appropriate subsection, brand or site (for example, the Environmental Registry), but still appear as part of the Ontario brand.
Site-specific menus or search should be placed as links in the secondary bar to emphasize that the functions are not related to Ontario.ca search and menus. For example, a menu in the secondary bar for the Environmental Registry could include links to more application-specific content, not all of ontario.ca.
If you have other suggestions or advice or any questions on headers, the design system team would love to hear from you.