.navbar{
position: fixed; z-index: 100; width: 100%; background-color: $primary; transition: 0.7s; &--nofixed{ position: relative; z-index: 3; }
}
.navbar__inner{
display: flex; align-items: center; justify-content: space-between; height: $navbar-height; color: #fff; transition: 0.7s;
}
// Content .navbar__logo{
font-size: 1.325rem; transition: 0; color: #fff; text-decoration: none;
}
.navbar__menu{
display: none; &--noMob{ display: block; } @include desktop{ display: block; } li{ margin-left: 4pt; backface-visibility: hidden; display: inline-block; @include desktop{ margin-left: 16pt; } } a{ color: #fff; @include desktop{ opacity: 0.75; &:hover{ opacity: 1; } &:after { display:block; content: ''; border-bottom: solid 1px #fff; transform: scaleX(0); transition: transform 250ms ease-in-out; } &:hover:after { transform: scaleX(1); } } }
}
.navbar__menu-mob{
display: block; &--noMob{ display: none; } @include desktop{ display: none; }
}
/*— Extended and transparent version —*/ .navbar–extended{
background-color: transparent; .navbar__inner{ height: $navbar-height; color: $hero-color; // Since this is transparent whatever color is used in the hero, fits here }
}
/*! responsive-nav.js 1.0.39 by @viljamis */
.nav__mobile ul {
margin: 0; padding: 0; width: 100%; display: block; list-style: none; background-color: $background-dark; color: #fff;
}
.nav__mobile li {
width: 60%; margin-left: auto; margin-right: auto; padding: 1em 0; display: block; border-bottom: 1px solid rgba(255,255,255,0.1); &:last-child{ border-bottom: none; }
}
.js .nav__mobile {
clip: rect(0 0 0 0); max-height: 0; position: absolute; display: block; overflow: hidden; zoom: 1;
}
.nav__mobile.opened {
max-height: 9999px;
}
.nav-toggle {
-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;
}
@include desktop{
.js .nav__mobile { position: relative; } .js .nav__mobile.closed { max-height: none; } .nav-toggle { display: none; }
}
toggle svg{
height: 1.2em; width: 1.2em; vertical-align: middle;
}