Ontario.ca header

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

  • Content:
    @use 'sass:math';
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/z-index.variables' as zIndex;
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as placeholders;
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineheight;
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
    
    $ontario-search-input-padding: 7.2rem;
    $ontario-search-input-padding--mobile: 6.4rem;
    
    $ontario-header-logo-width: 180px;
    $ontario-header-logo-width--mobile: 45px;
    
    .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: url(../icons/ontario-icons-close.svg);
    	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;
    }
    
    /* 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: typography.$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 spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4;
    	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;
    	}
    }
    
    .ontario-header__menu-toggler {
    	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: 6px;
    		width: 2rem;
    		height: 2rem;
    
    		@media screen and (max-width: breakpoints.$xsmall-breakpoint) {
    			margin-right: spacing.$spacing-0;
    		}
    	}
    }
    
    .ontario-header__language-toggler {
    	padding: spacing.$spacing-3;
    
    	abbr[title] {
    		text-decoration: none;
    	}
    }
    
    .ontario-header__search-toggler {
    	padding: spacing.$spacing-2 spacing.$spacing-3;
    	margin-left: spacing.$spacing-4;
    
    	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;
    }
    
  • URL: /components/raw/ontario-header/ontario-header.scss
  • Filesystem Path: fractal/components/components/headers/ontario-header/ontario-header.scss
  • Size: 10.5 KB
  • Content:
    .ontario-header-button:focus{box-shadow:0 0 0 4px #009adb;outline:4px solid transparent;transition:box-shadow .1s ease-in-out}.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:url(../icons/ontario-icons-close.svg);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}.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 0 0 1rem;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}.ontario-header__menu-toggler{padding:.375rem 1rem}@media screen and (max-width: 20em){.ontario-header__menu-toggler{padding-left:.5rem;padding-right:.5rem}}.ontario-header__menu-toggler span{display:flex}@media screen and (max-width: 20em){.ontario-header__menu-toggler span{display:none}}.ontario-header__menu-toggler svg{margin-right:6px;width:2rem;height:2rem}@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{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}
  • URL: /components/raw/ontario-header/ontario-header.css
  • Filesystem Path: fractal/components/components/headers/ontario-header/ontario-header.css
  • Size: 7 KB

When to use this component

This 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
  • ontario.ca menu

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


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 note

The Ontario.ca header requires these two JavaScript files:

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