<link media="all" rel="stylesheet" href="/assets/themes/default/css/header.css?cb=">
<header class="header" data-module="header">
<div class="header__inner js-header-inner">
<div class="header__mobile-navigation js-mobile-navigation">
<div class="header__mobile-navigation-inner">
<nav class="primary-navigation primary-navigation--mobile">
<ul class="primary-navigation__list">
<li class="primary-navigation__list-item js-nav-list-item primary-navigation--has-children ">
<a href="#" class="primary-navigation__link ">
<span>Parent</span>
</a>
</li>
<li class="primary-navigation__list-item js-nav-list-item primary-navigation--is-dynamic">
<a href="#" class="primary-navigation__link primary-navigation__link--is-active">
<span>Working</span>
</a>
<div class="menu-toggle js-menu-toggle">
<span class="menu-toggle__horizontal-line"></span>
<span class="menu-toggle__vertical-line"></span>
</div>
<div class="sub-navigation js-sub-navigation">
<div class="sub-navigation__inner js-sub-nav-inner">
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--links">
<div class="sub-navigation__col-title sub-navigation__links-title">Links</div>
<ul class="sub-navigation__link-list">
<li class="sub-navigation__link"><a href="#">link one</a></li>
<li class="sub-navigation__link"><a href="#">link two</a></li>
<li class="sub-navigation__link"><a href="#">link three</a></li>
</ul>
</div>
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
<div class="sub-navigation__col-title sub-navigation__text-title"><a href="#">Text</a></div>
<p class="sub-navigation__text-text"><a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi.</a></p>
<a href="#" data-module="cta" class="cta sub-navigation__text-cta">
Primary Cta
</a>
</div>
<div class="sub-navigation__col sub-navigation__col--image">
<div class="sub-navigation__image-wrapper">
<a href="#">
<div class="sub-navigation__image-container">
<img src="https://via.placeholder.com/150x150" alt="Alt Text" loading="lazy" class="sub-navigation__image">
</div>
</a>
<a href="#" class="sub-navigation__image-link">Image Link</a>
</div>
</div>
</div>
</div>
</li>
<li class="primary-navigation__list-item js-nav-list-item primary-navigation--is-dynamic">
<a href="#" class="primary-navigation__link ">
<span>Careers</span>
</a>
<div class="menu-toggle js-menu-toggle">
<span class="menu-toggle__horizontal-line"></span>
<span class="menu-toggle__vertical-line"></span>
</div>
<div class="sub-navigation js-sub-navigation">
<div class="sub-navigation__inner js-sub-nav-inner">
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
<div class="sub-navigation__col-title sub-navigation__text-title">Text</div>
<p class="sub-navigation__text-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi'</p>
</div>
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
<div class="sub-navigation__col-title sub-navigation__text-title">Text</div>
<p class="sub-navigation__text-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi'</p>
</div>
<div class="sub-navigation__col sub-navigation__col--image">
<div class="sub-navigation__image-wrapper">
<div class="sub-navigation__image-container">
<img src="https://via.placeholder.com/150x150" alt="Alt Text" loading="lazy" class="sub-navigation__image">
</div>
</div>
</div>
</div>
</div>
</li>
<li class="primary-navigation__list-item js-nav-list-item primary-navigation--is-dynamic">
<a href="#" class="primary-navigation__link ">
<span>News & Views</span>
</a>
<div class="menu-toggle js-menu-toggle">
<span class="menu-toggle__horizontal-line"></span>
<span class="menu-toggle__vertical-line"></span>
</div>
<div class="sub-navigation js-sub-navigation">
<div class="sub-navigation__inner js-sub-nav-inner">
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
<div class="sub-navigation__col-title sub-navigation__text-title">Text</div>
<p class="sub-navigation__text-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi'</p>
</div>
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--links">
<div class="sub-navigation__col-title sub-navigation__links-title">Links</div>
<ul class="sub-navigation__link-list">
<li class="sub-navigation__link"><a href="#">link one</a></li>
<li class="sub-navigation__link"><a href="#">link two</a></li>
<li class="sub-navigation__link"><a href="#">link three</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="primary-navigation__list-item js-nav-list-item primary-navigation--is-dynamic">
<a href="#" class="primary-navigation__link ">
<span>Contact</span>
</a>
<div class="menu-toggle js-menu-toggle">
<span class="menu-toggle__horizontal-line"></span>
<span class="menu-toggle__vertical-line"></span>
</div>
<div class="sub-navigation js-sub-navigation">
<div class="sub-navigation__inner js-sub-nav-inner">
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
<div class="sub-navigation__col-title sub-navigation__text-title">Text</div>
<p class="sub-navigation__text-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi'</p>
</div>
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--links">
<div class="sub-navigation__col-title sub-navigation__links-title">Links</div>
<ul class="sub-navigation__link-list">
<li class="sub-navigation__link"><a href="#">link one</a></li>
<li class="sub-navigation__link"><a href="#">link two</a></li>
<li class="sub-navigation__link"><a href="#">link three</a></li>
</ul>
</div>
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
<div class="sub-navigation__col-title sub-navigation__text-title">Text</div>
<p class="sub-navigation__text-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi'</p>
</div>
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--links">
<div class="sub-navigation__col-title sub-navigation__links-title">Links</div>
<ul class="sub-navigation__link-list">
<li class="sub-navigation__link"><a href="#">link one</a></li>
<li class="sub-navigation__link"><a href="#">link two</a></li>
<li class="sub-navigation__link"><a href="#">link three</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</nav>
<nav class="header__mobile-quick-links">
<a href="#" class="header__quick-link">
Quick Link
</a>
<a href="#" class="header__quick-link">
<img src="https://via.placeholder.com/100X25" alt="">
</a>
</nav>
</div>
</div>
<nav class="header__top-navigation js-top-navigation">
<div class="grid-container">
<div class="grid-x header__top-navigation-row">
<a href="#" class="header__quick-link">
Quick Link
</a>
<a href="#" class="header__quick-link">
<img src="https://via.placeholder.com/100X25" alt="">
</a>
</div>
</div>
</nav>
<div class="grid-container">
<div class="grid-x header__navigation-row">
<div class="header__navigation-wrapper">
<div class="burger">
<label for="burger-nav"></label>
<input type="checkbox" id="burger-nav" class="js-burger-nav" name="burger-nav" />
<span></span>
<span></span>
<span></span>
</div>
<nav class="primary-navigation primary-navigation--desktop">
<ul class="primary-navigation__list">
<li class="primary-navigation__list-item js-nav-list-item primary-navigation--has-children ">
<a href="#" class="primary-navigation__link ">
<span>Parent</span>
</a>
</li>
<li class="primary-navigation__list-item js-nav-list-item primary-navigation--is-dynamic">
<a href="#" class="primary-navigation__link primary-navigation__link--is-active">
<span>Working</span>
</a>
<div class="sub-navigation js-sub-navigation">
<div class="sub-navigation__inner js-sub-nav-inner">
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--links">
<div class="sub-navigation__col-title sub-navigation__links-title">Links</div>
<ul class="sub-navigation__link-list">
<li class="sub-navigation__link"><a href="#">link one</a></li>
<li class="sub-navigation__link"><a href="#">link two</a></li>
<li class="sub-navigation__link"><a href="#">link three</a></li>
</ul>
</div>
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
<div class="sub-navigation__col-title sub-navigation__text-title"><a href="#">Text</a></div>
<p class="sub-navigation__text-text"><a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi.</a></p>
<a href="#" data-module="cta" class="cta sub-navigation__text-cta">
Primary Cta
</a>
</div>
<div class="sub-navigation__col sub-navigation__col--image">
<div class="sub-navigation__image-wrapper">
<a href="#">
<div class="sub-navigation__image-container">
<img src="https://via.placeholder.com/150x150" alt="Alt Text" loading="lazy" class="sub-navigation__image">
</div>
</a>
<a href="#" class="sub-navigation__image-link">Image Link</a>
</div>
</div>
</div>
</div>
</li>
<li class="primary-navigation__list-item js-nav-list-item primary-navigation--is-dynamic">
<a href="#" class="primary-navigation__link ">
<span>Careers</span>
</a>
<div class="sub-navigation js-sub-navigation">
<div class="sub-navigation__inner js-sub-nav-inner">
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
<div class="sub-navigation__col-title sub-navigation__text-title">Text</div>
<p class="sub-navigation__text-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi'</p>
</div>
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
<div class="sub-navigation__col-title sub-navigation__text-title">Text</div>
<p class="sub-navigation__text-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi'</p>
</div>
<div class="sub-navigation__col sub-navigation__col--image">
<div class="sub-navigation__image-wrapper">
<div class="sub-navigation__image-container">
<img src="https://via.placeholder.com/150x150" alt="Alt Text" loading="lazy" class="sub-navigation__image">
</div>
</div>
</div>
</div>
</div>
</li>
<li class="primary-navigation__list-item js-nav-list-item primary-navigation--is-dynamic">
<a href="#" class="primary-navigation__link ">
<span>News & Views</span>
</a>
<div class="sub-navigation js-sub-navigation">
<div class="sub-navigation__inner js-sub-nav-inner">
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
<div class="sub-navigation__col-title sub-navigation__text-title">Text</div>
<p class="sub-navigation__text-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi'</p>
</div>
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--links">
<div class="sub-navigation__col-title sub-navigation__links-title">Links</div>
<ul class="sub-navigation__link-list">
<li class="sub-navigation__link"><a href="#">link one</a></li>
<li class="sub-navigation__link"><a href="#">link two</a></li>
<li class="sub-navigation__link"><a href="#">link three</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="primary-navigation__list-item js-nav-list-item primary-navigation--is-dynamic">
<a href="#" class="primary-navigation__link ">
<span>Contact</span>
</a>
<div class="sub-navigation js-sub-navigation">
<div class="sub-navigation__inner js-sub-nav-inner">
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
<div class="sub-navigation__col-title sub-navigation__text-title">Text</div>
<p class="sub-navigation__text-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi'</p>
</div>
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--links">
<div class="sub-navigation__col-title sub-navigation__links-title">Links</div>
<ul class="sub-navigation__link-list">
<li class="sub-navigation__link"><a href="#">link one</a></li>
<li class="sub-navigation__link"><a href="#">link two</a></li>
<li class="sub-navigation__link"><a href="#">link three</a></li>
</ul>
</div>
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
<div class="sub-navigation__col-title sub-navigation__text-title">Text</div>
<p class="sub-navigation__text-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi'</p>
</div>
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--links">
<div class="sub-navigation__col-title sub-navigation__links-title">Links</div>
<ul class="sub-navigation__link-list">
<li class="sub-navigation__link"><a href="#">link one</a></li>
<li class="sub-navigation__link"><a href="#">link two</a></li>
<li class="sub-navigation__link"><a href="#">link three</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</nav>
</div>
<div class="cell site-logo__wrapper">
<a class="site-logo" href="/">
<span>Default</span>
<img src="/media/logo.svg" class="site-logo__image" alt="Default" />
</a>
</div>
</div>
</div>
</div>
</header>
<div class="header__spacer js-header-spacer"></div>
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/header.css?cb={{cacheBuster}}">
<header class="header" data-module="header">
<div class="header__inner js-header-inner">
<div class="header__mobile-navigation js-mobile-navigation">
<div class="header__mobile-navigation-inner">
{{> @primary-navigation isMobile=true }}
<nav class="header__mobile-quick-links">
{{#each quickLinks}}
<a href="{{url}}" class="header__quick-link" {{#if target}}target="{{target}}" {{/if}} {{#if
addNoOpener}}rel="noopener" {{/if}}>
{{#if image.src}}
<img src="{{image.src}}" alt="{{image.altText}}">
{{else}}
{{text}}
{{/if}}
</a>
{{/each}}
</nav>
</div>
</div>
<nav class="header__top-navigation js-top-navigation">
<div class="grid-container">
<div class="grid-x header__top-navigation-row">
{{#each quickLinks}}
<a href="{{url}}" class="header__quick-link" {{#if target}}target="{{target}}" {{/if}} {{#if
addNoOpener}}rel="noopener" {{/if}}>
{{#if image}}
<img src="{{image.src}}" alt="{{image.altText}}">
{{else}}
{{text}}
{{/if}}
</a>
{{/each}}
</div>
</div>
</nav>
<div class="grid-container">
<div class="grid-x header__navigation-row">
<div class="header__navigation-wrapper">
{{> @burger }}
{{> @primary-navigation }}
{{#if searchResultsPageUrl}}
<a href="#" class="header__search-icon js-show-search"><span>Open Search</span></a>
{{/if}}
</div>
<div class="cell {{#if searchResultsPageUrl}}site-logo__wrapper--has-search{{/if}} site-logo__wrapper">
<a class="site-logo" href="{{logoLink}}">
<span>{{siteName}}</span>
<img src="{{logoImageUrl}}" class="site-logo__image" alt="{{siteName}}" />
</a>
</div>
</div>
</div>
</div>
{{#if searchResultsPageUrl}}
{{> @search-bar }}
{{/if}}
</header>
<div class="header__spacer js-header-spacer"></div>
{
"theme": "default",
"firstInstance": true,
"isFixed": false,
"logoLink": "/",
"logoImageUrl": "/media/logo.svg",
"siteName": "Default",
"showNavText": "Show navigation",
"mainMenu": [
{
"text": "Parent",
"url": "#",
"children": [
{
"text": "child 1",
"url": "#"
},
{
"text": "sibling child",
"url": "#"
},
{
"text": "sibling child",
"url": "#"
}
]
},
{
"text": "Working",
"url": "#",
"isActive": true,
"subNavigation": [
{
"type": "links",
"title": "Links",
"links": [
{
"text": "link one",
"url": "#"
},
{
"text": "link two",
"url": "#"
},
{
"text": "link three",
"url": "#"
}
]
},
{
"type": "text",
"title": "Text",
"text": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi.",
"cta": {
"isSecondary": false,
"url": "#",
"text": "Primary Cta"
}
},
{
"type": "image",
"image": {
"src": "https://via.placeholder.com/150x150",
"altText": "Alt Text"
},
"imageLink": {
"url": "#",
"text": "Image Link"
}
}
]
},
{
"text": "Careers",
"url": "#",
"subNavigation": [
{
"type": "text",
"title": "Text",
"text": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi'"
},
{
"type": "text",
"title": "Text",
"text": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi'"
},
{
"type": "image",
"image": {
"src": "https://via.placeholder.com/150x150",
"altText": "Alt Text"
}
}
]
},
{
"text": "News & Views",
"url": "#",
"subNavigation": [
{
"type": "text",
"title": "Text",
"text": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi'"
},
{
"type": "links",
"title": "Links",
"links": [
{
"text": "link one",
"url": "#"
},
{
"text": "link two",
"url": "#"
},
{
"text": "link three",
"url": "#"
}
]
}
]
},
{
"text": "Contact",
"url": "#",
"subNavigation": [
{
"type": "text",
"title": "Text",
"text": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi'"
},
{
"type": "links",
"title": "Links",
"links": [
{
"text": "link one",
"url": "#"
},
{
"text": "link two",
"url": "#"
},
{
"text": "link three",
"url": "#"
}
]
},
{
"type": "text",
"title": "Text",
"text": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi'"
},
{
"type": "links",
"title": "Links",
"links": [
{
"text": "link one",
"url": "#"
},
{
"text": "link two",
"url": "#"
},
{
"text": "link three",
"url": "#"
}
]
}
]
}
],
"cta": [
{
"text": "Call to Action",
"url": "#"
}
],
"quickLinks": [
{
"text": "Quick Link",
"url": "#"
},
{
"image": {
"src": "https://via.placeholder.com/100X25",
"altText": ""
},
"url": "#"
}
]
}
.burger {
height: 30px;
position: relative;
transition: .5s ease-in-out;
width: 30px;
&:hover {
cursor: pointer;
}
span {
background: $color-header-burger;
border-radius: 6px;
display: block;
height: 3px;
left: 0;
opacity: 1;
position: absolute;
transform: rotate(0deg);
transition: .3s ease-in-out;
width: 100%;
z-index: -1;
&:nth-last-child(3) {
top: 6px;
}
&:nth-last-child(2) {
top: 15px;
}
&:nth-last-child(1) {
top: 24px;
}
}
input {
display: none;
margin: 0;
&:checked ~ span:nth-last-child(3) {
top: 16px;
transform: rotate(135deg);
}
&:checked ~ span:nth-last-child(2) {
left: -60px;
opacity: 0;
}
&:checked ~ span:nth-last-child(1) {
top: 16px;
transform: rotate(-135deg);
}
}
label {
cursor: pointer;
float: left;
height: 30px;
opacity: .5;
width: 30px;
}
@include breakpoint(medium) {
display: none;
}
}
%menu-toggle-line {
background: $color-header-menu-toggle;
border-radius: 6px;
display: block;
height: 3px;
left: 0;
opacity: 1;
position: absolute;
transition: .2s ease-in-out;
width: 100%;
}
.menu-toggle {
height: rem(15);
position: absolute;
right: rem(20);
top: rem(25);
transition: .2s ease-in-out;
width: rem(15);
&:hover {
cursor: pointer;
}
&__horizontal-line {
@extend %menu-toggle-line;
left: 0;
top: 6px;
transform: rotate(0deg);
.open & {
transform: rotate(180deg);
}
}
&__vertical-line {
@extend %menu-toggle-line;
left: 0;
top: 6px;
transform: rotate(90deg);
.open & {
opacity: 0;
}
}
}
.primary-navigation {
display: inline-block;
list-style: none;
margin: 0;
overflow: auto;
@include breakpoint(medium) {
display: block;
left: auto;
overflow: visible;
position: relative;
text-align: right;
width: 100%;
}
&--mobile {
width: 100%;
}
&--desktop {
display: none;
@include breakpoint(medium) {
display: block;
height: 100%;
position: static;
}
}
&--is-dynamic {
@include breakpoint(medium) {
position: static;
}
&:hover {
.sub-navigation {
@include breakpoint(medium) {
visibility: visible;
}
}
}
}
&--open {
display: block;
}
&__list-item {
display: block;
list-style: none;
padding: rem(20) rem(20) rem(20) 0;
position: relative;
transition: .5s;
@include breakpoint(medium) {
align-items: center;
display: flex;
padding: 0 rem(20);
position: static;
&:first-child {
margin-left: auto;
}
&:last-child {
padding-right: 0;
}
}
&.open {
background: $color-grey;
@include breakpoint(medium) {
background: $color-white;
}
}
}
&__link {
border-bottom: 1px solid $color-grey;
color: $color-primary-nav;
padding-bottom: rem(20);
padding-left: rem(20);
position: relative;
text-decoration: none;
text-overflow: ellipsis;
.header__mobile-navigation & {
display: inline-block;
}
&:active {
position: relative;
top: 1px;
}
@include breakpoint(medium) {
border-bottom: 0;
font-size: rem(16);
padding-bottom: 0;
padding-left: 0;
position: relative;
}
.open & {
color: $color-black;
font-weight: bold;
}
&--is-active {
text-decoration: underline;
}
}
&__list {
display: block;
padding: 0;
@include breakpoint(medium) {
display: flex;
height: 100%;
padding: 0;
}
}
}
.header-search-bar {
$this: &;
background-color: $color-white;
padding: rem(24) 0;
position: absolute;
transform: translateY(-100%);
transition: transform .3s linear;
width: 100%;
z-index: 2;
@include breakpoint(medium) {
padding: rem(28) 0;
}
.search-open & {
transform: translateY(0);
}
&__inner {
align-items: center;
display: flex;
}
form {
display: flex;
width: calc(100% - #{rem(60)});
}
&__close-link {
background: url('../images/close.svg') no-repeat center center;
display: inline-block;
height: rem(24);
margin-left: auto;
width: rem(24);
span {
@extend %visually-hidden;
}
}
}
.site-logo {
$this: &;
display: inline-block;
&__wrapper {
align-self: center;
order: 2;
padding: rem(30) 0;
position: relative;
text-align: right;
width: 75%; // 9 col
@include breakpoint(medium) {
order: 1;
text-align: left;
width: calc(100% / 6); // 2 col
}
&--has-search {
align-items: center;
display: flex;
justify-content: center;
width: 50%; // 6 col
@include breakpoint(medium) {
display: block;
width: calc(100% / 6); // 2 col
}
}
}
&__image {
max-height: rem(100);
@include breakpoint(medium) {
max-height: rem(75);
}
}
span {
@extend %visually-hidden;
}
}
.sub-navigation {
flex-direction: column;
height: 0;
justify-content: center;
overflow: hidden;
padding: 0;
width: 100%;
z-index: 1;
@include breakpoint(medium) {
background-color: $color-white;
flex-direction: row;
height: auto;
left: 0;
padding: rem(20);
position: absolute;
top: 100%;
visibility: hidden;
}
a {
text-decoration: none;
}
&__inner {
@include breakpoint(medium) {
display: flex;
justify-content: center;
}
}
&__col {
@include breakpoint(medium) {
border-right: 1px solid $color-grey;
&:last-child {
border-right: 0;
}
}
flex-basis: 0;
margin-top: rem(10);
padding: rem(20);
text-align: left;
&--links {
flex-grow: 1;
max-width: rem(300);
.ie11 & {
width: 25%;
}
}
&--image {
border-right: 0;
display: flex;
flex-grow: 1;
flex-wrap: wrap;
max-width: rem(300);
padding-right: 0;
@include breakpoint(medium) {
flex-wrap: nowrap;
.ie11 & {
width: 25%;
}
}
}
&--text {
flex-grow: 1;
max-width: rem(300);
.ie11 & {
width: 25%;
}
}
&-title {
@extend %heading02;
margin-bottom: rem(10);
width: 100%;
@include breakpoint(medium) {
font-size: rem(24);
line-height: rem(34);
}
}
}
&__text {
&-text {
margin-bottom: rem(10);
}
&-cta {
@extend %secondary-cta;
}
}
&__image-wrapper {
display: flex;
flex-direction: column;
}
&__image {
margin-bottom: rem(15);
}
&__link {
padding: rem(10) 0;
&:first-of-type {
padding-top: 0;
}
}
}
import TweenLite from 'gsap';
import Power2 from 'gsap/TweenMax';
import { closest } from '../../../../js/utils/_helpers';
import addToDataLayer from '../../../../js/utils/datalayer';
import debounce from '../../../../js/utils/debounce';
export class Header {
constructor(container) {
this.container = container;
this.headerSpacer = document.querySelector('.js-header-spacer');
this.innerContainer = this.container.querySelector('.js-header-inner');
this.toggleButton = this.container.querySelector('.js-burger-nav');
this.nav = this.container.querySelector('.js-mobile-navigation');
this.desktopSearchForm = this.container.querySelector('.js-search-form');
this.desktopSearchTextField = this.container.querySelector('.js-search-textfield');
this.showSearchButton = this.container.querySelector('.js-show-search');
this.hideSearchButton = this.container.querySelector('.js-hide-search');
this.initialised = false;
this.isSearchOpen = false;
this.lastScrollTop = 0;
this.init();
}
init() {
if (!this.initialised) {
if (this.desktopSearchForm) {
this.desktopSearchForm.addEventListener('submit', () => { return Header.validateForm(); });
}
if (this.showSearchButton) {
this.showSearchButton.addEventListener('click', (e) => {
e.preventDefault();
if (this.container.classList.contains('header--mobile-nav-open')) {
// Hide the menu if it's open
this.toggleButton.checked = false;
this.toggleMobileMenu();
}
this.container.classList.toggle('search-open');
});
}
if (this.hideSearchButton) {
this.hideSearchButton.addEventListener('click', (e) => {
e.preventDefault();
this.hideSearchBar();
});
}
// declare resize event
const resize = debounce(50, () => { this.resize(); });
window.addEventListener('resize', resize);
this.resize();
let ticking = false;
this.lastKnownScrollPosition = window.scrollY;
window.addEventListener('scroll', () => {
this.lastKnownScrollPosition = window.scrollY < 0 ? 0 : window.scrollY;
if (!ticking) {
window.requestAnimationFrame(() => {
this.applyScrollClasses();
ticking = false;
});
ticking = true;
}
});
this.applyScrollClasses();
this.toggleMobileSubNavigation();
// trigger toggle on the burger icon
this.toggleButton.addEventListener('click', () => { this.toggleMobileMenu(); });
this.mobileHideSearch();
this.trackNavClicks();
// In case the back button is pressed and the burger checkbox is ticked we need to uncheck it
this.toggleButton.checked = false;
} else {
console.warn('Header module is already initialised!');
}
}
mobileHideSearch() {
if (this.mobileSearchButton) {
this.mobileSearchButton.classList.remove('header--search-showing');
this.container.classList.remove('header--search-showing');
this.toggleButton.checked = false;
this.isSearchOpen = false;
}
}
submitDesktopForm() {
if (this.desktopSearchTextField.value) {
this.desktopSearchForm.submit();
}
}
hideSearchBar() {
this.container.classList.remove('search-open');
}
toggleMobileMenu() {
// store checkbox for future reference
const state = this.toggleButton.checked;
// toggle css class by appending the modifier
this.innerContainer.classList.toggle('header__inner--mobile-nav-open');
this.container.classList.toggle('header--mobile-nav-open');
document.body.classList.toggle('mobile-nav-open');
if (state) {
TweenLite.staggerTo('.js-mobile-navigation', 0.3, { x: 0, delay: 0.05, ease: Power2.easeInOut }, 0.04);
} else {
TweenLite.staggerTo('.js-mobile-navigation', 0.2, { x: -200, ease: Power2.easeInOut }, 0.04);
}
this.hideSearchBar();
}
toggleMobileSubNavigation() {
// store all dropdown into an array
const menuToggles = this.nav.querySelectorAll('.js-menu-toggle');
// On click of each menu toggle (plus/minus) expand or collapse the sub menu
menuToggles.forEach((element) => {
element.addEventListener('click', () => {
const parent = closest(element, '.js-nav-list-item');
const child = parent.querySelector('.js-sub-navigation');
const elem = '.js-sub-nav-inner';
const speed = 0.5;
if (element.classList.contains('open')) {
// Close this menu
TweenLite.to(child, speed, { height: 0, ease: Power2.easeOut });
} else {
// Close other open menu items
const openNavs = this.nav.querySelectorAll('.js-nav-list-item.open');
openNavs.forEach((openNav) => {
const dropdown = openNav.querySelector('.js-sub-navigation');
const toggle = openNav.querySelector('.js-menu-toggle');
TweenLite.to(dropdown, speed, { height: 0, ease: Power2.easeOut });
dropdown.classList.remove('open');
openNav.classList.remove('open');
toggle.classList.remove('open');
});
// Open the closest menu
const height = `${child.querySelector(elem).offsetHeight}px`;
TweenLite.to(child, speed, { height, ease: Power2.easeOut });
}
element.classList.toggle('open');
parent.classList.toggle('open');
});
});
}
trackNavClicks() {
this.trackMainNavClicks();
this.trackSubNavClicks();
this.trackQuickLinkClicks();
}
trackMainNavClicks() {
const mainLinks = this.container.querySelectorAll('.primary-navigation__link');
if (mainLinks) {
mainLinks.forEach((mainLink) => {
mainLink.addEventListener('click', () => {
addToDataLayer({
'event': 'link.click',
'linkName': unescape(mainLink.querySelector('span').innerHTML).trim(),
'linkType': 'top nav',
});
});
});
}
}
trackSubNavClicks() {
const subLinks = this.container.querySelectorAll('.secondary-navigation__link');
if (subLinks) {
subLinks.forEach((subLink) => {
subLink.addEventListener('click', () => {
addToDataLayer({
'event': 'link.click',
'linkName': unescape(subLink.innerHTML).trim(),
'linkType': 'sub nav',
});
});
});
}
}
trackQuickLinkClicks() {
const quickLinks = this.container.querySelectorAll('.header__quick-link');
if (quickLinks) {
quickLinks.forEach((quickLink) => {
quickLink.addEventListener('click', () => {
addToDataLayer({
'event': 'link.click',
'linkName': unescape(quickLink.innerHTML).trim(),
'linkType': 'quick link',
});
});
});
}
}
// handle resizing and throttling
resize() {
const headerHeight = Math.max(this.container.offsetHeight, this.container.innerHeight || 0);
this.headerSpacer.style.height = `${headerHeight}px`;
}
// Apply classes to the header if the scroll position is not at the top of the window
applyScrollClasses() {
const scrollingClass = 'scrolling';
const defaultClass = 'no-scroll';
if (this.lastKnownScrollPosition <= 0) {
if (!this.container.classList.contains(defaultClass)) {
this.container.classList.add(defaultClass);
}
if (this.container.classList.contains(scrollingClass)) {
this.container.classList.remove(scrollingClass);
}
} else {
if (this.container.classList.contains(defaultClass)) {
this.container.classList.remove(defaultClass);
}
if (!this.container.classList.contains(scrollingClass)) {
this.container.classList.add(scrollingClass);
}
}
if (this.lastKnownScrollPosition > this.lastScrollTop) {
// Scrolling down
if (!this.container.classList.contains('scrolling-down')) {
this.container.classList.add('scrolling-down');
}
} else if (this.container.classList.contains('scrolling-down')) {
this.container.classList.remove('scrolling-down');
}
this.lastScrollTop = this.lastKnownScrollPosition;
}
}
export default (module) => new Header(module);
@use "sass:map";
@import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';
@import './_site-logo';
@import './_primary-navigation';
@import './_sub-navigation';
@import './_burger';
@import './_menu-toggle';
@import './_search-bar';
body {
&.mobile-nav-open {
height: 100vh;
overflow: hidden;
@include breakpoint(medium) {
height: auto;
overflow-y: auto;
}
}
}
.header {
background-color: $color-header-bg;
color: $color-header;
position: absolute;
width: 100%;
z-index: map.get($z-index, 'header');
&--fixed,
&--mobile-nav-open {
position: fixed;
}
&__inner {
background-color: $color-header-bg;
height: 100%;
position: relative;
transition: transform .3s ease-in-out;
z-index: 3; // Needs to be greater than the search bar index
&--mobile-nav-open {
transform: translateX(calc(100% - 90px));
@include breakpoint(medium) {
transform: translateX(0);
}
}
}
&__spacer {
height: 90px;
}
&__mobile-navigation {
background-color: $color-header-bg;
display: flex;
flex-direction: column;
height: 100vh;
left: calc(-100% + 90px);
list-style: none;
margin: 0;
overflow: auto;
position: absolute;
right: 0;
top: 0;
width: calc(100% - 90px);
@include breakpoint(medium) {
display: none;
}
}
&__navigation-wrapper {
align-items: center;
display: flex;
flex: 0 0 auto;
order: 1;
width: 25%;
@include breakpoint(medium) {
order: 3;
width: 83.33333%;
}
}
&__top-navigation {
background: $color-black;
color: $color-white;
display: none;
width: 100%;
a,
a:visited,
a:active {
color: $color-white;
}
@include breakpoint(medium) {
display: block;
}
&-row {
align-items: center;
display: flex;
justify-content: flex-end;
padding: rem(10) 0;
}
}
&__mobile-quick-links {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin: auto rem(20) 0;
}
&__quick-link {
@extend %p--small;
margin-right: rem(30);
padding: 5px;
text-decoration: none;
@include breakpoint(medium) {
padding: 0;
}
img {
height: rem(17);
vertical-align: middle;
}
&:last-of-type {
margin-right: 0;
}
.header__mobile-navigation & {
display: block;
padding: rem(20) rem(20) rem(20) 0;
}
}
&__search-icon {
background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="6" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M14.5 14.5L20 20" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
background-position: center center;
background-repeat: no-repeat;
display: block;
flex-shrink: 0;
height: rem(24);
margin-left: rem(21);
width: rem(26);
span {
@extend %visually-hidden;
}
&:hover {
background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="6" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M14.5 14.5L20 20" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
@include breakpoint(medium) {
margin-left: rem(40);
margin-right: 0;
}
&--desktop {
display: none;
@include breakpoint(medium) {
display: block;
}
}
&--mobile {
@include breakpoint(medium) {
display: none;
}
}
}
}
No notes defined.