File: /var/www/vhosts/creativefellows.nl/nec.creativefellows.nl/public/scss/_header.scss
/*
* Header
*/
.header{
&::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:7rem;
z-index:0;
background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%);
@include animate();
}
z-index:100;
width:100%;
//min-height:4.5rem;
position:fixed;
top:0;
left:0;
right:0;
@include animate();
/*
* Top bar
*/
.top-bar{
background:transparent;
width:100%;
padding:0.75rem 1.5rem;
z-index:1000;
position:relative;
flex-wrap: wrap;
@include animate();
@include breakpoint(small only) {
padding:0.75rem;
}
/*
* left
*/
.top-bar-left{
padding:0.5rem 0;
@include breakpoint(small only) {
padding:0;
}
// Logo
.logo{
display:block;
float:left;
height:1.5rem;
position:relative;
svg{
position:relative;
display:block;
height:100%;display:block;
@include animate();
*{fill: #fff;}
}
@include breakpoint(small only) {
margin:0.125rem 0;
height:1.25rem;
}
&:hover{
svg{margin-left:0.25rem;}
.cls-1{fill:#c98e56;}
.cls-2{}
}
}
.toggle-main-navigation{
float:right;
// toggle navigation
.toggle-menu{
float:right;position:relative;width:1.5rem;height:1.5rem;padding:0;transform:rotate(0deg);transition:.5s ease-in-out;cursor:pointer;
span{display:block;position:absolute;height:0.125em;width:100%;background:$white;opacity:1;left:0;transform:rotate(0deg);transition:.25s ease-in-out;}
span:nth-child(1){top:0.125em;}
span:nth-child(2),
span:nth-child(3){top:0.625em;}
span:nth-child(4){top:1.125em;}
&.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;
position:relative;
// default menu
li a{
position:relative;
line-height:1.5rem;
padding:0.5rem 1rem;
color:$white;
text-align:center;
&:hover{color:$white;}
&.is-active{color:$primary-color;}
@include breakpoint(large up){
+ ul{margin:0 0 1.5rem 0;}
+ ul li:last-child{border:none;}
+ ul li a{font-weight:400;}
}
&:hover,
&.link__active{
&::after{content:"";border-bottom:solid 0.25rem $secondary-color;position:absolute;bottom:-0.75rem;left:$global-padding;right:$global-padding;}
}
&:hover::after{border-bottom:solid 0.25rem $white;}
&.link__dropdown-open{
&::after{content:"";border-bottom:solid 0.25rem $primary-color;position:absolute;bottom:-0.75rem;left:$global-padding;right:$global-padding;}
}
}
// search
li.search-site{
margin-right:$global-margin;
position:relative;
form{@include animate();}
.search-icon {
position:relative;
z-index:100;
padding:0.5rem;
cursor:pointer;
label{
padding:0;//0.5rem 0.75rem;
cursor: pointer;
display: inline-block;
position:relative;
color:$white;
&: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:1rem;
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;}
}
}
}
// change language
li.change-language{
margin-right:$global-margin;
a{padding:0.5rem 0.75rem;}
a:hover::after{display:none;}
@include breakpoint(small only) {
display:none;
}
}
// get in touch
li.contact-us{
a:hover::after{display:none;}
.button{
text-transform:none;
padding:0.375rem 1.5rem;
&.button__hollow{border:solid 1px $primary-color;background:none;}
&.button__rounded{border-radius:1.25rem;}
@include breakpoint(small only) {
background:$primary-color !important;
color:$white !important;
}
}
@include breakpoint(small only) {
padding: 0.75rem 0;
border:none;
}
}
// mobile menu
.page-links__open + ul{display:block;}
.navigation-list__sub-items{
display:none;
padding:0;
margin:0;
@include breakpoint(medium up) {
display:none !important;
visibility:hidden !important;
}
li{position:relative;text-align:center;}
li:last-child{border:none;margin-bottom:1.5rem;}
strong{display:block;line-height:1.5rem;padding:0.75rem 0;text-transform:uppercase;color:$secondary-color;font-weight:500;cursor:pointer;}
strong::after{
content: "+";
display: block;
position: absolute;
top: 0.75rem;
right: 0;
width:1rem;
height: 1.5rem;
padding:0;
left: auto;
color: $primary-color;
font-size: 1.75rem;
text-align:center;
line-height: 1.25rem;
}
strong.page-links__open::after{content:"-";}
strong.page-links__open + ul{display:block;max-height: 500px;}
.navigation-list__page-links{
@include animate();
max-height:0;
overflow:hidden;
margin:0;// 0 1rem 0;
a{font-size:1rem;color:$primary-color;font-weight:300}
li:last-child{margin-bottom:1rem;}
}
}
@include breakpoint(medium down)
{
padding-right:0;
margin-top:1.5rem;
li{border-bottom:solid 1px $light-gray;}
li a{font-size: 1.25rem;font-weight: 400;padding:0.75rem 0;}
li a::after{display:none;}
}
}
}
}
}
.header__white,
.header__has-scrolled,
.header__mobile-white,
.header__navigation-open{
&::before{display:none;}
.top-bar{
background:$white;
box-shadow: 0 0.5rem 0.75rem rgba(0,0,0,0.125);
.top-bar-left{
.logo svg{
.st0{fill:$secondary-color}
.st1{fill:$primary-color}
.st2{fill:#0c54a0}
}
.toggle-main-navigation .toggle-menu span{background-color:$secondary-color;}
}
.top-bar-right{
ul li a{
color:$secondary-color;
&:hover{color:$primary-color;}
&:hover::after{border-bottom:solid 0.25rem $primary-color;}
}
li.search-site{
label{color:$light-gray !important;}
input{
background-color: $white !important;
box-shadow:inset 0 0 0.5rem $light-gray !important;
border:solid 1px $light-gray !important;
}
}
}
}
}
// navigation mobile open
.header__navigation-open{
@include breakpoint(small only) {
bottom:0;
background:$white;
overflow: scroll;
.top-bar{box-shadow:none;}
}
}
// space header
.header__white + .header-spacer{
height:4rem;
}
// dropdown
.section-dropdown
{
position:fixed;
top:4rem;left:0;right:0;
z-index:100;
@include breakpoint(small only) {
display:none;
visibility:hidden;
}
.dropdown-section{
margin-top:1rem;
.background-white{
position:relative;
background:$white;
border-radius:0.75rem;
margin:0 $global-margin;
padding:$global-padding*2 1.25rem $global-padding/2 1.25rem;
box-shadow: 0 0.5rem 0.75rem rgba(0,0,0,0.125);
@include animate();
}
.close-dropdown{
position:absolute;top:$global-padding;top:0rem;right:1rem;font-size:2rem;width:1.125rem;height:1.125rem;color:$medium-gray;
@include animate();
&:hover{color:$black;}
}
/*.column{width:25%;}
.column__products{}
.column__solutions{
width:33.3333%;
.column-description{min-height:3.625rem;}
}
.column__partners{
width:33.3333%;
}*/
.column-header{
margin-top:0;
position:relative;
&::before{content:"";position:absolute;top:0;left:-0.75rem;bottom:0;border-left:solid 1px $primary-color;}
}
.column-description{
color:$dark-gray;
font-size:0.8125rem;
}
.column-list{
margin-left:0;
a{font-size:0.875rem;}
}
ul{list-style:none;}
.group-header{margin-bottom:0;font-weight:500;color:$secondary-color;font-size:0.9375rem;text-transform:none;}
.group-list{
margin-top:0;
margin-left:0;
a{font-size:0.875rem;display:block;}
}
.group-list__industries li{width:50%;display:inline-block;}
}
.dropdown-section__products{display:block;}
.dropdown-section__hidden{display:none;}
}
.reveal__change-language{
.select-country-list{
margin:0;
li{
margin-bottom:0.375rem;
a{
background: rgba($light-gray,0.125) url(/images/flags/emea.png) no-repeat 0.75rem 50%;
border:solid 1px $light-gray;
display:block;
padding:0.5rem 0.5rem 0.5rem 2.5rem;
font-weight:$global-weight-bold;
color:$secondary-color;
@include border-radius();
@include animate();
}
a:hover{
border:solid 1px $medium-gray;
background-position:1rem 50%;
background-color:rgba($light-gray,0.25);
padding-left:2.75rem;
}
&.nl a{background-image: url(/images/flags/nl.png);}
&.uk a{background-image: url(/images/flags/uk.png);}
&.de a{background-image: url(/images/flags/de.png);}
&.it a{background-image: url(/images/flags/it.png);}
}
li:last-child{margin:0;}
}
}