Header

In progress

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.

  • Content: 
    @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;
    }
}
  • URL: /components/raw/header/header.scss
  • Filesystem Path: fractal/components/components/header/header.scss
  • Size: 8.1 KB
  • Content: 
    .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}
  • URL: /components/raw/header/header.css
  • Filesystem Path: fractal/components/components/header/header.css
  • Size: 7.4 KB

Guiding principle: Be consistent.

What’s included in the header

The header provides:

  • top level navigation for all pages, transactions or applications
  • access to the ontario.ca homepage
  • English and French language toggle

There are three main header options to choose from:

Types of headers

Default header

The default header should include:

  • the black bar
  • Ontario logo
  • language toggle

Only ontario.ca will include a search bar and menu in the default header.

Ontario.ca header

The ontario.ca header includes:

  • the black bar
  • Ontario logo
  • language toggle
  • search bar
  • menu

Technical note

The Ontario.ca header requires the following two JavaScript files:

Expanded header (coming soon)

The expanded header will contain a secondary bar under the black bar that includes:

  • site-specific branding
  • menus
  • additional links

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.

Help improve this page

If you have other suggestions or advice or any questions on headers, the design system team would love to hear from you.