File: /var/www/vhosts/creativefellows.nl/werkenbijergatis.creativefellows.nl/public/scss/_header.scss
header{
z-index:1000;
background:$white;
.top-bar{
width:100%;
z-index:1000;
position:relative;
flex-wrap: wrap;
margin:auto;
@include animate();
/*
* left
*/
.top-bar-left{
.logo{
display:block;
float:left;
height:auto;
position:relative;
transform:translateY(-0.25rem);
svg{
position:relative;
display:block;
height:3rem;display:block;
@include animate();
}
}
.toggle-main-navigation{
float:right;
margin-top:0.375rem;
.toggle-menu{
float:right;position:relative;width:2rem;height:2rem;padding:0;transform:rotate(0deg);transition:.5s ease-in-out;cursor:pointer;
span{display:block;position:absolute;height:0.125em;width:100%;background:$black;opacity:1;left:0;transform:rotate(0deg);transition:.25s ease-in-out;}
span:nth-child(1){top:0rem;}
span:nth-child(2),
span:nth-child(3){top:0.75rem;}
span:nth-child(4){top:1.5rem;}
&.open span:nth-child(1){top:18px;width:0%;left:50%;}
&.open span:nth-child(2){-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
&.open span:nth-child(3){-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
&.open span:nth-child(4){top:18px;width:0%;left:50%;}
}
}
}
/*
* right
*/
.top-bar-right{
ul{
//background:none;
li{
a{
color:$dark-gray;
position:relative;
font-size:1rem;
border-right:solid 1px $light-gray
}
&:last-child a{border:none;}
}
.submenu{
a{padding:$global-menu-padding;}
@include breakpoint(large up){
border-top:solid 1px $light-gray;
margin-top:1rem;
text-align:center;
margin-left:50%;
transform:translate(-50%,1px);
box-shadow:0 1rem 1rem rgba($black,0.125);
}
}
a.link__button{
@include button();
font-weight:$global-weight-bold;
padding:$button-padding;
margin:0 0 0 1rem;
padding: 0.75rem 1.25rem;
font-size:1rem;
&::before{content:"";}
&::after{
content: "";
vertical-align: middle;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 576.03'%3E%3Cpath style='fill:%23fff' d='M488 329.57c32-18.4 32-64.7 0-83.2L72 6.47c-31.9-18.4-72 4.6-72 41.6V528c0 36.9 40 60 72 41.6l416-240Z'/%3E%3C/svg%3E") no-repeat 0 50%;
width: .375rem;
height: 1rem;
display: inline-block;
margin-left: .375rem;
transition: all .3s;
}
}
a.link__active::after{
@include breakpoint(large up){
content:"";bottom:calc(-1.5rem + 2px);left:1rem;right:1rem;border-bottom:solid 2px $primary-color;z-index:1;position:absolute;
}
}
// search
li.search-site{
margin-right:$global-margin;
position:relative;
form{@include animate();}
.search-icon {
position:relative;
z-index:100;
label{
padding:0.5rem 0.75rem;
cursor: pointer;
display: inline-block;
position:relative;
&:focus{color:#000;}
&:active{color:#000;}
}
@include breakpoint(small only) {
display:none;
}
}
.input-wrapper{
float: right;
position:absolute;
z-index:10000;
top:0;
right:0;
input{
outline:0;
height:auto;
width: 0;
padding:0.375rem 1rem;
margin-right: 0;
margin-left:0;
border:solid 1px transparent;
box-shadow:none;
border-radius:1.25rem;
max-width:none;
@include animate();
opacity:0;
color:#000;
font-size:1.25rem;
background:$white url(../images/search-bg.png) no-repeat calc(100% - 1rem) 50%;
background-size:0.875rem auto;
}
//&.open input,
input:focus {
width: 33rem;
padding-left:1rem;
opacity:1;
}
button{
display:none;
@include animate();
}
// mobile
@include breakpoint(small only) {
position:relative;
float:none;
input,
input:focus{opacity:1;width:100%;box-sizing:border-box;margin:0.75rem 0;}
}
}
}
@include breakpoint(medium down){
padding-right:0;
li{
border-bottom:solid 1px rgba($light-gray,0.5);
text-align:center;
&:last-child{border:none;}
}
li a{
//font-size:1.125rem;padding:1rem;
&.is-active{font-weight:400;}
}
li ul{
margin:0 0 1.5rem 0;
background:$white;
a{font-size:1rem;}
}
li ul li:last-child{border:none;};
&::after{
top:auto;
bottom:-0.5rem;
border:none;
width:100%;
background-position:50% 50%;
background-size: auto 1.5rem;
height:3rem;
}
}
}
}
.top-bar-left,
.top-bar-right{
flex: 0 1 auto;
@include breakpoint(medium down){
flex: 0 0 100%;
max-width: 100%;
&.top-bar-right__secondary{
display:none;
}
}
}
.top-bar__center{
margin:0;
padding: 0;
ul.large-horizontal > li:last-child{
@include breakpoint(medium down){
display:block;
visibility:visible;
a{
@include button();
font-weight:$global-weight-bold;
padding:0.5rem 1rem;
margin:0.75rem 0 0.75rem 1rem;
background: url(/images/icons/locked.svg) no-repeat 0.75rem 50%;
background-size:0.75rem;
padding-left:2rem;
&::before{content:"";}
}
}
}
@include breakpoint(medium down){
&::after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:$white;height:100vh;z-index:-100;}
}
}
@include breakpoint(medium down)
{
margin-top:0;
padding-bottom:0.375rem;
.top-bar-left{
.logo{transform:translateY(-0.25rem);height:auto;}
.logo svg{height:3rem}
}
}
}
&.is-stuck{
box-shadow:0 0.25rem 1rem rgba($black,0.125);
}
&.sticky{z-index:100 !important;}
}