<header class="header">
<button class="hamburger__wrapper" id="mobileNav" type="button" aria-expanded="false" aria-haspopup="true">
<div class="hamburger__text u-visually-hidden">
MENU
</div>
<div class="hamburger__btn hamburger hamburger--collapse ">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</div>
</button>
<div class="header__top">
<div class="header__inner l-container__inner header__cols">
<div class="header__col header__col-left">
<div class="logo">
<img src="/assets/img/logo.svg" type="image/svg+xml" alt="Logo" />
</div>
</div>
<div class="header__col header__col-right">
<div class="search__wrap" id="searchBar">
<input for="" type="search" class="form__input form__input--no-brd" for="" placeholder="Search">
<button class="search__btn" type="submit">
<span class="u-visually-hidden">Search</span>
<div class="search__btn-icon">
<svg viewBox="0 0 512 512" class="a-icon__svg a-icon__svg--x1">
<use xlink:href="#icon__search"></use>
</svg>
</div>
</button>
</div>
<div class="search__toggle">
<button id="searchToggle" aria-label="toggle search field">
<div class="search__toggle-item search__toggle-open" data-search-toggle="open">
<svg viewBox="0 0 512 512" class="a-icon__svg a-icon__svg--x2">
<use xlink:href="#icon__search"></use>
</svg>
</div>
<div class="search__toggle-item search__toggle-close" data-search-toggle="close">
<svg viewBox="0 0 384 512" class="a-icon__svg a-icon__svg--x2">
<use xlink:href="#icon__xmark"></use>
</svg>
</div>
</button>
</div>
</div>
</div>
</div>
<div class="navigation__container header__btm" id="mainNav" hidden>
<div class="header__inner l-container__inner header__cols">
<div class="header__col header__col-left">
<nav class="navigation__wrapper">
<div class="navigation">
<ul class="navigation__inner">
<li class="navigation__item"><a href="#Home" class="navigation__link" aria-expanded="false">Home</a>
</li>
<li class="navigation__item navigation__item--active"><a href="#About" class="navigation__link" aria-expanded="false">About</a>
</li>
<li class="navigation__item"><a href="#Projects" class="navigation__link" aria-expanded="false">Projects</a>
</li>
<li class="navigation__item"><a href="#Outputs" class="navigation__link" aria-expanded="false">Outputs</a>
</li>
<li class="navigation__item"><a href="#Contact" class="navigation__link" aria-expanded="false">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="header__col header__col-right">
<button class="btn header__btn--sharepoint btn--icon ">
Team SharePoint Area
<svg viewBox="0 0 15 20" class="a-icon__svg svg-icon__chevron-dims">
<use xlink:href="#icon__chevron"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="navigation-sub__container">
<nav class="navigation-sub l-container__inner">
<ul class="navigation-sub__inner">
<li class="navigation-sub__item"><a class="navigation-sub__link" href="">What we do</a></li>
<li class="navigation-sub__item navigation-sub__item--active"><a class="navigation-sub__link" href="">Our Work</a></li>
<li class="navigation-sub__item"><a class="navigation-sub__link" href="">Our People</a></li>
<li class="navigation-sub__item"><a class="navigation-sub__link" href="">Our Partners</a></li>
</ul>
</nav>
</div>
</header>
<header class="header">
{% render "@navigation--hamburger" %}
<div class="header__top">
<div class="header__inner l-container__inner header__cols">
<div class="header__col header__col-left">
{% render "@logo" %}
</div>
<div class="header__col header__col-right">
{% render "@search" %}
</div>
</div>
</div>
<div class="navigation__container header__btm" id="mainNav" hidden>
<div class="header__inner l-container__inner header__cols">
<div class="header__col header__col-left">
{% render "@navigation" with {'active' : active } %}
</div>
<div class="header__col header__col-right">
{% render "@button--default" with {classess:'header__btn--sharepoint btn--icon', icon: '@icon--icon__chevron', 'svgsize':'icon__svg--x2', 'name' : 'Team SharePoint Area'} %}
</div>
</div>
</div>
{% render "@navigation--sub" %}
</header>
/* No context defined. */
.header {
background: #ffffff;
position: sticky;
top:0;
box-shadow: 0px 4px 4px 0px #00000040;
z-index: 2;
&__top, &__btm {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
max-width: 100vw;
padding:rem(15px) $elem-pad-sm;
@include mappy-bp(medium) {
padding:$elem-pad;
}
}
&__top {
// padding:0 $elem-pad;
box-shadow: 0px 4px 4px 0px #00000040;
}
&__btm {
padding:$elem-pad-sm;
}
&__cols {
width: 100%;
display: flex;
justify-content: space-between;
}
&__col {
@include mappy-bp(medium) {
width: 50%;
}
&-right {
display: flex;
justify-content: flex-end;
align-items: flex-start;
padding-right: $hamburger-layer-width + $hamburger-padding-x;
@include mappy-bp(small) {
padding-right: 0;
align-items: center;
}
}
}
&__inner {
@include container-inner-styles;
}
.header__btn--sharepoint {
margin-left: rem(30);
font-weight: $fnt-weight-bold;
width: 100%;
max-width: rem(270);
svg {
fill: setcolor(2)
}
}
}
No notes defined.