You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
999 B
SCSS
42 lines
999 B
SCSS
.desktop-nav{display:none}
|
|
.mobile-nav{height:100%;
|
|
width:100%;
|
|
position:fixed;
|
|
top:51px;left:0;right:0;
|
|
padding:1.24rem;
|
|
background:#FFF;border-left:1px solid #EEE;
|
|
z-index:8;}
|
|
nav>a{
|
|
padding:.2rem 0;
|
|
display:block;
|
|
border-top:1px dotted #101}
|
|
nav>a:first-child{border:none}
|
|
.mobile-nav--hidden{
|
|
display:none;
|
|
}
|
|
|
|
.burger-container{
|
|
position:relative;height:20px;width:28px;
|
|
cursor:pointer;z-index:9}
|
|
.burger,.burger::after,.burger::before{
|
|
position:absolute;
|
|
height:4px;width:28px;content:"";
|
|
transition:transform 300ms cubic-bezier(.4,1,.5,1);
|
|
background:$black;}
|
|
.burger::before{margin-top:8px}
|
|
.burger::after{margin-top:16px}
|
|
.burger-open{overflow:hidden;}
|
|
|
|
@media(min-width:720px){
|
|
.desktop-nav{display:inline-block}
|
|
nav>a{margin-left:2rem;padding:auto;display:inline;border:none}
|
|
nav>a:first-child{padding:1rem 0;margin-left:0}
|
|
.burger-container{display:none}
|
|
.burger-open{overflow:auto;}
|
|
.mobile-nav{display:none}
|
|
}
|
|
@media(max-width:320px){
|
|
.burger-container{display:block}
|
|
}
|
|
|