cedaei.com/themes/codex/assets/scss/partials/_nav.scss

83 lines
1.2 KiB
SCSS

@import "burger";
.nav {
font-size: 16px;
position: fixed;
display: flex;
justify-content: center;
align-items: center;
background: $white;
visibility: hidden;
z-index: 1;
@media screen and (min-width: $medium) {
display: block;
visibility: visible;
padding-top: 3em;
width: $navWidth;
}
}
.nav--active .nav {
visibility: visible;
height: 100%;
width: 100%;
@media screen and (min-width: $medium) {
width: $navWidth;
}
}
.nav__list {
text-align: right;
list-style: none;
margin: 0;
padding: 0;
width: 50%;
@media screen and (min-width: $medium) {
width: auto;
}
@media screen and (max-width: $medium - 1) {
transform: translateY(-25px);
opacity: 0;
.nav--active & {
transform: translateY(0);
opacity: 1;
transition: all 500ms ease;
}
}
}
.nav__list li {
margin-bottom: 3em;
line-height: 1.5em;
&:last-of-type {
margin-bottom: 0;
}
@media screen and (min-width: $medium) {
margin-bottom: 1.75em;
}
}
.nav__list a {
color: $grey;
text-decoration: none;
font-size: 2em;
&.active {
color: $black;
}
&:hover {
color: $black;
}
@media screen and (min-width: $medium) {
font-size: 1em;
}
}