<div class="header">
<div class="header__navigation">
<div class="header__eyebrow-navigation">
<div class="header__logo">
<a href="/"><img src="" alt="" class="header__logo-image"></a>
</div <ul class="eyebrow-menu eyebrow-menu--">
<li class="eyebrow-menu__item">
<div class="quick-search ">
<form role="search" method="get" id="quick-search-form" class="quick-search__form" action="">
<input id="quick-search-input" name="s" type="text" placeholder="Search" class="quick-search__input ">
<label for="quick-search-input" class="quick-search__input-label">
Search the website
</label>
<div class="quick-search__icon">
<svg aria-hidden="true" class="search-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path class="_mark" fill="inherit" d="M6 12A6 6 0 116 0a6 6 0 010 12zm0-2a4 4 0 100-8 4 4 0 000 8zm5.293 2.707a1 1 0 011.414-1.414l3 3a1 1 0 01-1.414 1.414l-3-3z" />
</svg>
</div>
<input aria-label="submit search query" class="quick-search__submit" type="submit" id="quick-search-submit" value="Search" />
</form>
</div>
</li>
</ul>
</div>
<div class="header__main-navigation">
<div class="header__logo header__logo--mobile">
<a href="/"><img src="" alt="" class="header__logo-image"></a>
</div <div role="navigation" aria-label="Main Navigation" class="main-navigation">
<ul class="main-navigation__list">
<li class="main-navigation__item">
<a class="
main-navigation__item-link
main-navigation__item-link--active
main-navigation__item-link--active-trail
" href="https://google.com">Primary Page One
</a>
</li>
<li class="main-navigation__item">
<a class="
main-navigation__item-link
" href="http://google.com">Primary Page Two
</a>
</li>
<li class="main-navigation__item">
<a aria-expanded="false" class="
js-mega-menu-toggle
main-navigation__item-link
" href="http://google.com">Primary Page Three
<div class="main-navigation__item-link-icon-container">
<div class="main-navigation__item-link-icon">
<svg aria-hidden="true" class="down-toggle-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="6" viewBox="0 0 12 6">
<path class="_mark down-toggle-icon__shape" fill="#FF552E" fill-rule="evenodd" d="M12 0L6 6 0 0z" />
</svg>
</div>
</div>
</a>
<div class="main-navigation__children">
<div data-active="false" class="mega-menu js-mega-menu">
<div class="mega-menu__container">
<div class="mega-menu__title">
<div class="mega-menu__title-text">
<a href="http://google.com" class="mega-menu__title-text-link">
Primary Page Three
<span class="mega-menu__title-text-link-icon">
<svg aria-hidden="true" class="down-toggle-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="6" viewBox="0 0 12 6">
<path class="_mark down-toggle-icon__shape" fill="#FF552E" fill-rule="evenodd" d="M12 0L6 6 0 0z" />
</svg>
</span>
</a>
</div>
</div>
<ul class="mega-menu__list">
<li class="mega-menu__item">
<a class="
mega-menu__item-link
" href="http://google.com">Interior Page 1
</a>
</li>
<li class="mega-menu__item">
<a class="
mega-menu__item-link
" href="http://google.com">Interior Page 2
</a>
</li>
<li class="mega-menu__item">
<a class="
mega-menu__item-link
" href="http://google.com">Interior Page 3
</a>
</li>
<li class="mega-menu__item">
<a class="
mega-menu__item-link
mega-menu__item-link--active-trail
" href="http://google.com">Interior Page 4
</a>
</li>
<li class="mega-menu__item">
<a class="
mega-menu__item-link
" href="http://google.com">Interior Page 5
</a>
</li>
<li class="mega-menu__item">
<a class="
mega-menu__item-link
" href="http://google.com">Interior Page 6
</a>
</li>
<li class="mega-menu__item">
<a class="
mega-menu__item-link
" href="http://google.com">Interior Page 7
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="main-navigation__item">
<a class="
main-navigation__item-link
" href="http://google.com">Primary Page Four
</a>
</li>
<li class="main-navigation__item">
<a class="
main-navigation__item-link
" href="http://google.com">Primary Page Five
</a>
</li>
<li class="main-navigation__item">
<a class="
main-navigation__item-link
" href="http://google.com">Primary Page Six
</a>
</li>
</ul>
</div>
<button aria-label="Toggle main navigation" aria-expanded="false" class="small-main-navigation-toggle js-small-main-navigation-toggle">
<span class="small-main-navigation-toggle__content-container small-main-navigation-toggle__content-container--collapsed">
<span class="small-main-navigation-toggle__text">
Menu
</span>
<span class="small-main-navigation-toggle__icon">
<svg class="menu" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
<path class="menu__shape" fill-rule="evenodd" clip-rule="evenodd" d="M11 10C11.5523 10 12 10.4477 12 11C12 11.5523 11.5523 12 11 12H1C0.447715 12 0 11.5523 0 11C0 10.4477 0.447715 10 1 10H11ZM11 5C11.5523 5 12 5.44772 12 6C12 6.55228 11.5523 7 11 7H1C0.447715 7 0 6.55228 0 6C0 5.44772 0.447715 5 1 5H11ZM11 0C11.5523 0 12 0.447715 12 1C12 1.55228 11.5523 2 11 2H1C0.447715 2 0 1.55228 0 1C0 0.447715 0.447715 0 1 0H11Z" fill="#FF552E" />
</svg>
</span>
</span>
<span class="small-main-navigation-toggle__content-container small-main-navigation-toggle__content-container--expanded">
<span class="small-main-navigation-toggle__text">
Close
</span>
<span class="small-main-navigation-toggle__icon">
<svg class="x" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
<path class="x__shape" d="M1.6129 0.209705L1.70711 0.292893L6 4.585L10.2929 0.292893C10.6834 -0.0976311 11.3166 -0.0976311 11.7071 0.292893C12.0676 0.653377 12.0953 1.22061 11.7903 1.6129L11.7071 1.70711L7.415 6L11.7071 10.2929C12.0976 10.6834 12.0976 11.3166 11.7071 11.7071C11.3466 12.0676 10.7794 12.0953 10.3871 11.7903L10.2929 11.7071L6 7.415L1.70711 11.7071C1.31658 12.0976 0.683418 12.0976 0.292893 11.7071C-0.0675907 11.3466 -0.0953203 10.7794 0.209705 10.3871L0.292893 10.2929L4.585 6L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893C0.653377 -0.0675907 1.22061 -0.0953203 1.6129 0.209705Z" fill="#303030" />
</svg>
</span>
</span>
</button>
<div role="navigation" aria-label="Main Navigation" class="small-main-navigation">
<ul class="small-main-navigation__list">
<li class="small-main-navigation__item">
<div class="small-main-navigation__item-container">
<a class="
small-main-navigation__item-link
small-main-navigation__item-link--active
small-main-navigation__item-link--active-trail" href="https://google.com">Primary Page One
</a>
</div>
</li>
<li class="small-main-navigation__item">
<div class="small-main-navigation__item-container">
<a class="
small-main-navigation__item-link
" href="http://google.com">Primary Page Two
</a>
</div>
</li>
<li class="small-main-navigation__item">
<div class="small-main-navigation__item-container">
<a class="
small-main-navigation__item-link
" href="http://google.com">Primary Page Three
<span class="small-main-navigation__item-link-icon">
<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z" />
</svg>
</span>
</a>
<button aria-expanded="false" class="small-main-navigation__item-toggle" aria-label="toggle Primary Page Three menu">
<span class="small-main-navigation__item-toggle-icon">
<svg aria-hidden="true" class="down-toggle-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="6" viewBox="0 0 12 6">
<path class="_mark down-toggle-icon__shape" fill="#FF552E" fill-rule="evenodd" d="M12 0L6 6 0 0z" />
</svg>
</span>
</button>
</div>
<div class="small-main-navigation__children">
<ul class="small-main-navigation__children-list">
<li class="small-main-navigation__children-item">
<a class="
small-main-navigation__children-item-link
" href="http://google.com">Interior Page 1
</a>
</li>
<li class="small-main-navigation__children-item">
<a class="
small-main-navigation__children-item-link
" href="http://google.com">Interior Page 2
</a>
</li>
<li class="small-main-navigation__children-item">
<a class="
small-main-navigation__children-item-link
" href="http://google.com">Interior Page 3
</a>
</li>
<li class="small-main-navigation__children-item">
<a class="
small-main-navigation__children-item-link
small-main-navigation__children-item-link--active-trail
" href="http://google.com">Interior Page 4
</a>
</li>
<li class="small-main-navigation__children-item">
<a class="
small-main-navigation__children-item-link
" href="http://google.com">Interior Page 5
</a>
</li>
<li class="small-main-navigation__children-item">
<a class="
small-main-navigation__children-item-link
" href="http://google.com">Interior Page 6
</a>
</li>
<li class="small-main-navigation__children-item">
<a class="
small-main-navigation__children-item-link
" href="http://google.com">Interior Page 7
</a>
</li>
</ul>
</div>
</li>
<li class="small-main-navigation__item">
<div class="small-main-navigation__item-container">
<a class="
small-main-navigation__item-link
" href="http://google.com">Primary Page Four
</a>
</div>
</li>
<li class="small-main-navigation__item">
<div class="small-main-navigation__item-container">
<a class="
small-main-navigation__item-link
" href="http://google.com">Primary Page Five
</a>
</div>
</li>
<li class="small-main-navigation__item">
<div class="small-main-navigation__item-container">
<a class="
small-main-navigation__item-link
" href="http://google.com">Primary Page Six
</a>
</div>
</li>
</ul>
<div class="small-main-navigation__search">
<div class="quick-search quick-search--large">
<form role="search" method="get" id="quick-search-small-form" class="quick-search__form" action="">
<input id="quick-search-small-input" name="s" type="text" placeholder="Search" class="quick-search__input quick-search__input--large">
<label for="quick-search-small-input" class="quick-search__input-label">
Search the website
</label>
<div class="quick-search__icon">
<svg aria-hidden="true" class="search-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path class="_mark" fill="inherit" d="M6 12A6 6 0 116 0a6 6 0 010 12zm0-2a4 4 0 100-8 4 4 0 000 8zm5.293 2.707a1 1 0 011.414-1.414l3 3a1 1 0 01-1.414 1.414l-3-3z" />
</svg>
</div>
<input aria-label="submit search query" class="quick-search__submit" type="submit" id="quick-search-small-submit" value="Search" />
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="header">
<div class="header__navigation">
<div class="header__eyebrow-navigation">
<div class="header__logo">
<a href="/"><img src="{{ siteLogo }}" alt="" class="header__logo-image"></a>
</div
{% include 'partials/navigation/eyebrow/eyebrow.twig' %}
</div>
<div class="header__main-navigation">
<div class="header__logo header__logo--mobile">
<a href="/"><img src="{{ siteLogo }}" alt="" class="header__logo-image"></a>
</div
{% include 'partials/navigation/main-navigation/main-navigation.twig' %}
{% include 'partials/navigation/small-main-navigation/small-main-navigation.twig' %}
</div>
</div>
</div>
{
"mainMenu": {
"currentPageInMenu": true,
"items": [
{
"title": "Primary Page One",
"url": "https://google.com",
"isActive": true,
"isChildActive": false,
"isDescendantActive": true,
"children": []
},
{
"title": "Primary Page Two",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Primary Page Three",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": [
{
"title": "Interior Page 1",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Interior Page 2",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Interior Page 3",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Interior Page 4",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": true,
"children": []
},
{
"title": "Interior Page 5",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Interior Page 6",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Interior Page 7",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
}
]
},
{
"title": "Primary Page Four",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Primary Page Five",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Primary Page Six",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
}
]
}
}
.header
display flex
padding 16px 24px
position relative
+above(breakpointHeaderSmall)
padding-top 32px
padding-bottom 24px
padding-left 32px
padding-right 32px
+above(breakpointHeaderLarge)
@extends $contentContainer
padding 32px 48px
&__navigation
display flex
flex 1
flex-direction column
justify-content flex-end
+above(breakpointHeaderMedium)
justify-content space-between
&__eyebrow-navigation
display flex
justify-content space-between
&__main-navigation
display flex
&__logo
display none
+above(breakpointHeaderLarge)
display block
&--mobile
display block
+above(breakpointHeaderLarge)
display none
No notes defined.