<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__icon">
<svg class="menu" width="23" height="20" viewBox="0 0 23 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="menu__shape" d="M0 1.625C0 0.761719 0.710938 0 1.625 0H21.125C21.9883 0 22.75 0.761719 22.75 1.625C22.75 2.53906 21.9883 3.25 21.125 3.25H1.625C0.710938 3.25 0 2.53906 0 1.625ZM0 9.75C0 8.88672 0.710938 8.125 1.625 8.125H21.125C21.9883 8.125 22.75 8.88672 22.75 9.75C22.75 10.6641 21.9883 11.375 21.125 11.375H1.625C0.710938 11.375 0 10.6641 0 9.75ZM21.125 19.5H1.625C0.710938 19.5 0 18.7891 0 17.875C0 17.0117 0.710938 16.25 1.625 16.25H21.125C21.9883 16.25 22.75 17.0117 22.75 17.875C22.75 18.7891 21.9883 19.5 21.125 19.5Z" fill="#3A3A3A" />
</svg>
</span>
</span>
<span class="small-main-navigation-toggle__content-container small-main-navigation-toggle__content-container--expanded">
<span class="small-main-navigation-toggle__icon">
<svg class="close-icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="close-icon__path" d="M15.7803 13.4951C16.4404 14.1045 16.4404 15.1709 15.7803 15.7803C15.4756 16.085 15.0693 16.2373 14.6631 16.2373C14.2061 16.2373 13.7998 16.085 13.4951 15.7803L8.16309 10.4482L2.78027 15.7803C2.47559 16.085 2.06934 16.2373 1.66309 16.2373C1.20605 16.2373 0.799805 16.085 0.495117 15.7803C-0.165039 15.1709 -0.165039 14.1045 0.495117 13.4951L5.82715 8.1123L0.495117 2.78027C-0.165039 2.1709 -0.165039 1.10449 0.495117 0.495117C1.10449 -0.165039 2.1709 -0.165039 2.78027 0.495117L8.16309 5.82715L13.4951 0.495117C14.1045 -0.165039 15.1709 -0.165039 15.7803 0.495117C16.4404 1.10449 16.4404 2.1709 15.7803 2.78027L10.4482 8.16309L15.7803 13.4951Z" fill="#14516E" />
</svg>
</span>
</span>
</button>
<div role="navigation" aria-label="Main Navigation" class="small-main-navigation">
<div class="small-main-navigation__search">
<div class="quick-search">
<form role="search" method="get" id="quick-search-small-form" class="quick-search__form" action="">
<input id="quick-search-small-input" placeholder="Search" name="s" type="text" class="quick-search__input">
<label for="quick-search-small-input" class="quick-search__input-label">
Search the website
</label>
<div class="quick-search__icon">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.1259 15.2325C17.6239 15.7638 17.6239 16.5939 17.1259 17.1251C16.5946 17.6232 15.7645 17.6232 15.2333 17.1251L11.2821 13.1408C9.92078 14.0372 8.26063 14.5021 6.46766 14.2697C3.41297 13.838 0.955938 11.3478 0.557501 8.3263C-0.00695259 3.81067 3.81141 -0.00768501 8.32703 0.556768C11.3485 0.955206 13.8388 3.41224 14.2704 6.46692C14.5028 8.25989 14.038 9.92005 13.1415 11.2482L17.1259 15.2325ZM3.14734 7.39661C3.14734 9.75403 5.03992 11.6466 7.39734 11.6466C9.72156 11.6466 11.6473 9.75403 11.6473 7.39661C11.6473 5.07239 9.72156 3.14661 7.39734 3.14661C5.03992 3.14661 3.14734 5.07239 3.14734 7.39661Z" />
<path d="M17.1259 15.2325C17.6239 15.7638 17.6239 16.5939 17.1259 17.1251C16.5946 17.6232 15.7645 17.6232 15.2333 17.1251L11.2821 13.1408C9.92078 14.0372 8.26063 14.5021 6.46766 14.2697C3.41297 13.838 0.955938 11.3478 0.557501 8.3263C-0.00695259 3.81067 3.81141 -0.00768501 8.32703 0.556768C11.3485 0.955206 13.8388 3.41224 14.2704 6.46692C14.5028 8.25989 14.038 9.92005 13.1415 11.2482L17.1259 15.2325ZM3.14734 7.39661C3.14734 9.75403 5.03992 11.6466 7.39734 11.6466C9.72156 11.6466 11.6473 9.75403 11.6473 7.39661C11.6473 5.07239 9.72156 3.14661 7.39734 3.14661C5.03992 3.14661 3.14734 5.07239 3.14734 7.39661Z" fill-opacity="0.2" />
</svg>
</div>
<input aria-label="submit search query" class="quick-search__submit" type="submit" id="quick-search-small-submit" value="Search" />
</form>
</div>
</div>
<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">Our Work
</a>
<button aria-expanded="false" class="small-main-navigation__item-toggle" aria-label="toggle Our Work menu">
<span class="small-main-navigation__item-toggle-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>
</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
small-main-navigation__children-item-link--active-trail
" 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>
</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">Services
</a>
<button aria-expanded="false" class="small-main-navigation__item-toggle" aria-label="toggle Services menu">
<span class="small-main-navigation__item-toggle-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>
</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>
</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">About
</a>
<button aria-expanded="false" class="small-main-navigation__item-toggle" aria-label="toggle About menu">
<span class="small-main-navigation__item-toggle-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>
</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 Interior Page 1 Interior Page 1 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">Invest
</a>
<button aria-expanded="false" class="small-main-navigation__item-toggle" aria-label="toggle Invest menu">
<span class="small-main-navigation__item-toggle-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>
</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>
</ul>
</div>
</li>
</ul>
</div>
{{ enqueue_script('small-main-navigation') }}
<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__icon">
{% include 'bits/icons/menu.twig' %}
</span>
</span>
<span class="small-main-navigation-toggle__content-container small-main-navigation-toggle__content-container--expanded">
<span class="small-main-navigation-toggle__icon">
{% include 'bits/icons/x.twig' %}
</span>
</span>
</button>
<div
role="navigation"
aria-label="Main Navigation"
class="small-main-navigation">
<div class="small-main-navigation__search">
{% include 'bits/quick-search/quick-search.twig' %}
</div>
<ul class="small-main-navigation__list">
{% for item in mainMenu.items %}
<li class="small-main-navigation__item">
<div class="small-main-navigation__item-container">
<a
class="
small-main-navigation__item-link
{{ item.isActive ? 'small-main-navigation__item-link--active' }}
{{ item.isDescendantActive ? 'small-main-navigation__item-link--active-trail' }}"
href="{{ item.url }}">{{ item.title }}
</a>
{% if item.children %}
<button aria-expanded="false" class="small-main-navigation__item-toggle" aria-label="toggle {{ item.title }} menu">
<span class="small-main-navigation__item-toggle-icon">
{% include 'bits/icons/right-chevron.twig' %}
</span>
</button>
{% endif %}
</div>
{% if item.children %}
<div class="small-main-navigation__children">
<ul class="small-main-navigation__children-list">
{% for item in item.children %}
<li class="small-main-navigation__children-item">
<a
class="
small-main-navigation__children-item-link
{{ item.isActive ? 'small-main-navigation__children-item-link--active' }}
{{ item.isDescendantActive ? 'small-main-navigation__children-item-link--active-trail' }}
"
href="{{ item.url }}">{{ item.title }}
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
{
"site": {
"name": "E3 Alliance"
},
"mainMenu": {
"currentPageInMenu": true,
"items": [
{
"title": "Our Work",
"url": "https://google.com",
"isActive": true,
"isChildActive": false,
"isDescendantActive": true,
"children": [
{
"title": "Interior Page 1",
"url": "http://google.com",
"isActive": false,
"isChildActive": true,
"isDescendantActive": true,
"children": [
{
"title": "Child Page 1",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Child Page 2",
"url": "http://google.com",
"isActive": true,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Child Page 3",
"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": "Child Page 1",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Child Page 2",
"url": "http://google.com",
"isActive": true,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Child Page 3",
"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": "Services",
"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": "About",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": [
{
"title": "Interior Page 1 Interior Page 1 Interior Page 1 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": "Invest",
"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": []
}
]
}
]
}
}
.small-main-navigation-toggle
--buttonBackgroundColor white
--collapsedTextColor jet
--expandedTextColor jet
--iconFillColor jet
align-items center
cursor pointer
display flex
margin-left auto
position relative
+above(breakpointHeaderLarge)
display none
&__text
@extends $headline5
color var(--collapsedTextColor)
flex 1
margin-right 8px
&__icon
transition all 0.3s
margin-bottom -2px
& .x__shape
& .menu__shape
fill var(--iconFillColor)
&[aria-expanded=true]
z-index 3
position relative
background-color var(--buttonBackgroundColor)
& .small-main-navigation-toggle__content-container--expanded
display block
& .small-main-navigation-toggle__content-container--collapsed
display none
&[aria-expanded=false]
& .small-main-navigation-toggle__content-container--expanded
display none
& .small-main-navigation-toggle__content-container--collapsed
display block
&[aria-expanded=true]
& ^[0]__text
color var(--expandedTextColor)
.small-main-navigation
--activeBackgroundColor none
--backgroundColor sapphire
--iconFillColor white
--iconFillColorActive white
--itemBackgroundColor none
--itemBackgroundColorActive none
--itemTextColorActive white
@extends $contentContainerInterior
background-color var(--backgroundColor)
display none
+above(breakpoint)
display none
@supports (display: grid)
position absolute
top 100%
left 0
right 0
z-index -1
opacity 0
&__list
padding 16px 0
&__item
border-bottom 1px solid darkSapphire
&:not(:last-child)
margin-bottom 8px
&:before
display none !important
&:has(.small-main-navigation__item-link--active-trail)
border-bottom 1px solid white
&__item-container
display flex
&__item-link
@extends $headline5
color white
display block
text-decoration none
background-color var(--itemBackgroundColor)
padding 12px 16px 12px 0
flex 1
transition all 0.3s
//&--active
//&--active-trail
&:focus
&:hover
&:active
color var(--itemTextColorActive)
& .small-main-navigation__item-link-icon
transform translateX(4px)
& .right-chevron__shape
fill var(--iconFillColorActive)
&__item-link-icon
display inline-block
margin-left 8px
transition all 0.3s
& .right-chevron__shape
& .down-toggle-icon__shape
fill var(--iconFillColor)
&__item-toggle
align-items center
background-color var(--itemBackgroundColor)
cursor pointer
display flex
flex 0 0 56px
justify-content center
margin-left 2px
transform rotate(90deg)
transition all 0.3s
&:focus
&:hover
&:active
& .right-chevron__shape
fill var(--iconFillColorActive)
&[aria-expanded=true]
& .right-chevron
transform rotate(180deg)
& .right-chevron__shape
fill var(--iconFillColorActive)
&__item-toggle-icon
width 16px
& .right-chevron__shape
& ._mark
fill white
&__children
margin-top 2px
margin-bottom 16px
display none
&[data-active=true]
display block
&__children-item:not(:last-child)
margin-bottom 5px
&__children-item-link
color white
background-color var(--itemBackgroundColor)
padding 8px 32px
display block
text-decoration none
transition all 0.3s
&--active
&--active-trail
color greenApple
font-weight 700
&:focus
&:hover
&:active
background-color var(--itemBackgroundColorActive)
color var(--itemTextColorActive)
&__search
margin 24px 0
.small-main-navigation
&[data-collapsing]
animation slideOut 0.5s
&[data-expanding]
z-index 3
animation slideIn 0.5s
&[data-expanded=true]
z-index 11
opacity 1
display block
height 100vh
No notes defined.