Ontario.ca header

This header is mandatory for all pages that are part of the main ontario.ca website.

  • Content: 
    @use 'sass:math';
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/z-index.variables' as zIndex;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as placeholders;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineheight;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;

$ontario-search-input-padding: 7.2rem;
$ontario-search-input-padding--mobile: 6.4rem;

$ontario-header-logo-width: 180px;
$ontario-header-logo-width--mobile: 45px;

:root {
	--header-search-reset: url(../icons/svg/ontario-icon-close.svg);
}

.ontario-header {
	position: relative;
	overflow: hidden;
	z-index: 5;
	background-color: colours.$ontario-colour-black;
	color: colours.$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.$spacing-6;
		height: spacing.$spacing-6;
		margin-bottom: spacing.$spacing-0;
	}
}

.ontario-header__logo-container {
	height: globalVariables.$ontario-logo-height;
}

.ontario-header__logo-container a {
	display: inline-block;
	height: 100%;

	&:focus {
		box-shadow: 0 0 0 globalVariables.$global-radius colours.$ontario-colour-focus;
	}
}

.ontario-header__logo-container {
	img {
		width: $ontario-header-logo-width--mobile;
		height: globalVariables.$ontario-logo-height;

		@media screen and (min-width: breakpoints.$small-breakpoint) {
			width: $ontario-header-logo-width;
			height: globalVariables.$ontario-logo-height;
		}
	}
}

/* Header search styles */
.ontario-header__search-container {
	position: relative;
	display: none;

	@media screen and (min-width: breakpoints.$medium-breakpoint) {
		display: flex;
	}

	@media screen and (min-width: breakpoints.$small-breakpoint) {
		padding-right: math.div(2rem, 2);
	}
}

.ontario-header__search-input.ontario-input {
	border-width: 0;
	margin-bottom: spacing.$spacing-0;
	height: globalVariables.$standard-input-height;
	padding-left: spacing.$spacing-3;
	padding-right: $ontario-search-input-padding;

	&:invalid + input[type='reset'] {
		display: none;
	}

	&:focus {
		& ~ .ontario-header__search-submit {
			background-color: colours.$ontario-colour-link;
			color: colours.$ontario-colour-white;

			&:hover {
				background-color: colours.$ontario-colour-link--hover;
				color: colours.$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 colours.$ontario-colour-focus;
		-moz-box-shadow: none;
	}

	&:invalid:not(:focus) {
		box-shadow: none;
		-moz-box-shadow: none;
	}

	@media screen and (min-width: breakpoints.$small-breakpoint) and (max-width: breakpoints.$medium-breakpoint) {
		padding-left: spacing.$spacing-4;
		padding-right: $ontario-search-input-padding--mobile;
	}
}

.ontario-header__search-submit {
	border: 0;
	border-radius: 0 3px 3px 0;
	background-color: colours.$ontario-greyscale-5;
	color: colours.$ontario-colour-black;

	display: flex;
	justify-content: center;
	align-items: center;

	font-family: 'Open Sans', sans-serif;
	font-weight: fontWeights.$ontario-font-weights-semi-bold;
	font-size: 1.125rem;
	height: 100%;
	line-height: lineheight.$ontario-line-height-8;

	position: absolute;
	right: spacing.$spacing-4;
	top: spacing.$spacing-0;
	cursor: pointer;

	padding-left: spacing.$spacing-3;
	padding-right: spacing.$spacing-3;

	&:hover {
		background-color: colours.$ontario-colour-link--hover;
		color: colours.$ontario-colour-white;
	}

	&:focus {
		outline: none;
		box-shadow: 0 0 0 globalVariables.$global-radius colours.$ontario-colour-focus;
		background-color: colours.$ontario-colour-link--hover;
		color: colours.$ontario-colour-white;
	}

	&:active {
		background-color: colours.$ontario-colour-link--active;
		color: colours.$ontario-colour-white;
	}

	svg {
		margin-right: spacing.$spacing-0;
	}
}

input[type='reset'].ontario-header__search-reset {
	position: absolute;
	display: flex;
	align-items: center;
	top: 11px;
	right: 80px;
	height: 28px;
	width: 28px;
	color: black;
	margin: spacing.$spacing-0;
	padding: spacing.$spacing-2;

	background-image: var(--header-search-reset);
	background-position: center center;
	background-repeat: no-repeat;
	background-color: transparent;
	outline: none;
	border: none;
	cursor: pointer;

	&:focus {
		box-shadow: 0 0 0 globalVariables.$global-radius colours.$ontario-colour-focus;
	}
}

/* Header menu & language toggle & close search button styles */
.ontario-header__nav-right-container {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: spacing.$spacing-4;

	@media screen and (min-width: breakpoints.$medium-breakpoint) {
		gap: spacing.$spacing-0;
	}
}

/* Header buttons */
.ontario-header-button {
	background-color: colours.$ontario-colour-black;
	border: none;
	border-radius: globalVariables.$global-radius;
	box-sizing: border-box;
	box-shadow: none;
	color: colours.$ontario-colour-white;
	cursor: pointer;

	display: flex;
	align-items: center;

	font-size: 1.125rem;
	font-weight: fontWeights.$ontario-font-weights-semi-bold;
	font-family: fonts.$ontario-font-open-sans;
	height: globalVariables.$standard-input-height;
	line-height: math.div(14, 9);
	text-align: center;
	text-decoration: none;

	&:focus {
		@extend %ontario-focus;
	}

	&:hover,
	&:focus,
	&:visited {
		color: colours.$ontario-colour-white;
	}
}

.ontario-header-button--with-outline,
.ontario-header-button--without-outline {
	background-color: colours.$ontario-colour-black;
	color: colours.$ontario-colour-white;

	&:hover {
		background-color: colours.$ontario-greyscale-70;
	}

	&:active {
		background-color: colours.$ontario-greyscale-60;
	}

	&:focus {
		background-color: colours.$ontario-greyscale-70;
	}
}

.ontario-header-button--with-outline {
	border: 2px solid colours.$ontario-colour-white;
	margin: spacing.$spacing-0;
	padding: math.div(spacing.$spacing-3, 2) spacing.$spacing-4;

	&:hover {
		border: 2px solid colours.$ontario-colour-white;
		color: colours.$ontario-colour-white;
	}

	&:focus {
		background-color: colours.$ontario-greyscale-70;
	}

	@media screen and (max-width: breakpoints.$xsmall-breakpoint) {
		padding: math.div(spacing.$spacing-3, 2);
	}
}

.ontario-header-button--without-outline {
	&:focus {
		background-color: colours.$ontario-greyscale-70;
	}
}

@media screen and (min-width: breakpoints.$medium-breakpoint) {
	.ontario-header-button--desktop {
		background-color: colours.$ontario-colour-black;
		margin-left: spacing.$spacing-4;
		/* padding uses !important because a more specific global or utility rule
            (from the design-system globals) overrides this component rule in some
            contexts (e.g. header variants). Using !important ensures the desktop
            button gets the intended spacing without changing upstream styles. */
		padding: spacing.$spacing-1 spacing.$spacing-1 spacing.$spacing-1 spacing.$spacing-3 !important;

		svg {
			margin-left: spacing.$spacing-1;
			/* margin-right needs !important because the general .ontario-header__menu-toggle
                svg rule applies later/in a more specific context and pushes a different value.
               The important flag forces this desktop variant to take precedence. */
			margin-right: spacing.$spacing-0 !important;
			/* width/height use !important to override global svg sizing rules coming
                from the shared variables or component defaults (these may be applied
                by a higher-specificity selector or imported partial). We constrain the
                desktop button's icon size explicitly here. */
			width: spacing.$spacing-5 !important;
			height: spacing.$spacing-5 !important;
		}

		&:hover,
		&:focus {
			background-color: colours.$ontario-greyscale-70;
		}
	}

	.ontario-header-button--desktop.ontario-header-button--with-outline {
		border: none;
	}
}

.ontario-header__menu-toggle {
	padding: math.div(spacing.$spacing-3, 2) spacing.$spacing-4;

	@media screen and (max-width: breakpoints.$xsmall-breakpoint) {
		padding-left: spacing.$spacing-2;
		padding-right: spacing.$spacing-2;
	}

	span {
		display: flex;

		@media screen and (max-width: breakpoints.$xsmall-breakpoint) {
			display: none;
		}
	}

	svg {
		margin-right: globalFunctions.px-to-rem(6);
		width: spacing.$spacing-6;
		height: spacing.$spacing-6;

		@media screen and (max-width: breakpoints.$xsmall-breakpoint) {
			margin-right: spacing.$spacing-0;
		}
	}
}

.ontario-header__language-toggler {
	padding: spacing.$spacing-1 spacing.$spacing-3;

	abbr[title] {
		text-decoration: none;
	}

	@media screen and (min-width: breakpoints.$medium-breakpoint) {
		background-color: colours.$ontario-colour-black;

		&:hover,
		&:focus {
			background-color: colours.$ontario-greyscale-70;
		}
	}
}

.ontario-header__search-toggler {
	padding: spacing.$spacing-2 spacing.$spacing-3;

	svg {
		@media screen and (min-width: breakpoints.$small-breakpoint) {
			margin-right: 4px;
		}
	}
}

.ontario-header__search-close {
	flex-direction: column-reverse;
	font-weight: fontWeights.$ontario-font-weights-normal;
	margin-right: spacing.$spacing-4;
	padding: math.div(spacing.$spacing-5, 10) spacing.$spacing-1;
	position: relative;
	height: 60px;
	display: none;

	span {
		position: relative;
		top: -3px;
		font-size: fontSizes.$ontario-font-size-standard-body-text;
		margin-left: spacing.$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: breakpoints.$small-breakpoint) {
		flex-direction: row;
		padding: spacing.$spacing-1 spacing.$spacing-2 spacing.$spacing-1 spacing.$spacing-4;
		height: globalVariables.$standard-input-height;

		span {
			top: 0;
		}

		svg {
			position: relative;
			width: spacing.$spacing-7;
			height: spacing.$spacing-7;
		}
	}
}

.ontario-header--search-open .ontario-header__search-close {
	@media screen and (min-width: breakpoints.$medium-breakpoint) {
		display: none;
	}
}

.ontario-header__search-close-container {
	display: none;
	justify-content: flex-end;
	padding-right: 0;

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		width: auto;
		padding-left: spacing.$spacing-0;
		padding-right: spacing.$spacing-0;
	}
}

@media screen and (max-width: breakpoints.$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-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.6);
	width: 100%;
	height: 100%;
	z-index: zIndex.$ontario-z-index-above-medium;
}

.ontario-navigation--open {
	.ontario-overlay {
		display: block;

		@media screen and (min-width: breakpoints.$medium-breakpoint) {
			display: none;
		}
	}
}

.ontario-navigation--open .ontario-navigation .ontario-header-button {
	visibility: visible;
}

#ontario-search-reset {
	display: none;
}

@media screen and (min-width: breakpoints.$medium-breakpoint) {
	.ontario-icon--rotated {
		transform: rotate(180deg);
	}
}
  • URL: /components/raw/ontario-header/ontario-header.scss
  • Filesystem Path: fractal/components/components/headers-and-footers/ontario-header/ontario-header.scss
  • Size: 12.4 KB
  • Content: 
    .ontario-header-button:focus{box-shadow:0 0 0 4px #009adb;outline:4px solid transparent;transition:box-shadow .1s ease-in-out}:root{--header-search-reset: url(../icons/svg/ontario-icon-close.svg)}.ontario-header{position:relative;overflow:hidden;z-index:5;background-color:#1a1a1a;color:#fff;display:flex;align-items:center;height:5.75rem}.ontario-header .ontario-row{display:flex;align-items:center;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__logo-container img{width:45px;height:46px}@media screen and (min-width: 40em){.ontario-header__logo-container img{width:180px;height:46px}}.ontario-header__search-container{position:relative;display:none}@media screen and (min-width: 73em){.ontario-header__search-container{display:flex}}@media screen and (min-width: 40em){.ontario-header__search-container{padding-right:1rem}}.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:invalid+input[type=reset]{display:none}.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: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: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}input[type=reset].ontario-header__search-reset{position:absolute;display:flex;align-items:center;top:11px;right:80px;height:28px;width:28px;color:#000;margin:0;padding:.5rem;background-image:var(--header-search-reset);background-position:center center;background-repeat:no-repeat;background-color:transparent;outline:none;border:none;cursor:pointer}input[type=reset].ontario-header__search-reset:focus{box-shadow:0 0 0 4px #009adb}.ontario-header__nav-right-container{display:flex;align-items:center;justify-content:flex-end;gap:1rem}@media screen and (min-width: 73em){.ontario-header__nav-right-container{gap:0}}.ontario-header-button{background-color:#1a1a1a;border:none;border-radius:4px;box-sizing:border-box;box-shadow:none;color:#fff;cursor:pointer;display:flex;align-items:center;font-size:1.125rem;font-weight:600;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;height:48px;line-height:1.5555555556;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:focus,.ontario-header-button--without-outline:focus{background-color:#4d4d4d}.ontario-header-button--with-outline{border:2px solid #fff;margin:0;padding:.375rem 1rem}.ontario-header-button--with-outline:hover{border:2px solid #fff;color:#fff}.ontario-header-button--with-outline:focus{background-color:#4d4d4d}@media screen and (max-width: 20em){.ontario-header-button--with-outline{padding:.375rem}}.ontario-header-button--without-outline:focus{background-color:#4d4d4d}@media screen and (min-width: 73em){.ontario-header-button--desktop{background-color:#1a1a1a;margin-left:1rem;padding:.25rem .25rem .25rem .75rem !important}.ontario-header-button--desktop svg{margin-left:.25rem;margin-right:0 !important;width:1.5rem !important;height:1.5rem !important}.ontario-header-button--desktop:hover,.ontario-header-button--desktop:focus{background-color:#4d4d4d}.ontario-header-button--desktop.ontario-header-button--with-outline{border:none}}.ontario-header__menu-toggle{padding:.375rem 1rem}@media screen and (max-width: 20em){.ontario-header__menu-toggle{padding-left:.5rem;padding-right:.5rem}}.ontario-header__menu-toggle span{display:flex}@media screen and (max-width: 20em){.ontario-header__menu-toggle span{display:none}}.ontario-header__menu-toggle svg{margin-right:.375rem;width:2rem;height:2rem}@media screen and (max-width: 20em){.ontario-header__menu-toggle svg{margin-right:0}}.ontario-header__language-toggler{padding:.25rem .75rem}.ontario-header__language-toggler abbr[title]{text-decoration:none}@media screen and (min-width: 73em){.ontario-header__language-toggler{background-color:#1a1a1a}.ontario-header__language-toggler:hover,.ontario-header__language-toggler:focus{background-color:#4d4d4d}}.ontario-header__search-toggler{padding:.5rem .75rem}@media screen and (min-width: 40em){.ontario-header__search-toggler svg{margin-right:4px}}.ontario-header__search-close{flex-direction:column-reverse;font-weight:400;margin-right:1rem;padding:.15rem .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{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;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:flex}}.ontario-overlay{display:none;position:fixed;top:0;left:0;background:rgba(0,0,0,.6);width:100%;height:100%;z-index:2}.ontario-navigation--open .ontario-overlay{display:block}@media screen and (min-width: 73em){.ontario-navigation--open .ontario-overlay{display:none}}.ontario-navigation--open .ontario-navigation .ontario-header-button{visibility:visible}#ontario-search-reset{display:none}@media screen and (min-width: 73em){.ontario-icon--rotated{transform:rotate(180deg)}}
  • URL: /components/raw/ontario-header/ontario-header.css
  • Filesystem Path: fractal/components/components/headers-and-footers/ontario-header/ontario-header.css
  • Size: 7.8 KB

When to use this component

This ontario.ca header is only used for pages that are:

  • created on the ontario.ca content management system
  • integrated into the main ontario.ca website environment

The use of this header is very specific. In most cases, if you’re creating an application or subsite, you should use the application header.

Features

The ontario.ca header includes:

  • black bar
  • Ontario logo
  • language toggle
  • ontario.ca search bar
  • sign in menu
  • ontario.ca topics menu

The search bar and topics menu in this header connect to pages that are part of the information architecture of the main ontario.ca website.

The sign in menu in this header links to sign in pages for certain Government of Ontario services.

Best practices

Do

  • link the Ontario logo in the black bar to either the English or French ontario.ca landing page (depending on the language of the page)
  • ensure the language toggle is inside the black bar
  • ensure the language toggle switches you to the other language of the page you’re on

Don’t

  • customize the ontario.ca header in any way
  • copy the ontario.ca header design and customize the search or menu items

Example

Diagram of the Ontario.ca header on desktop, showing the Ontario logo, ontario.ca search bar, language toggle, and Ontario.ca menu.

Technical specifications

Technical note

The Ontario.ca header requires these two JavaScript files:

If you have any questions or feedback, please get in touch.