// Burger at the top right of small displays .burger
cursor: pointer display: block padding-right: 3vw z-index: 1000 & > div background-color: $burger-color height: 2px margin: 7px width: 25px
.burger-line-1
transition: width .6s ease-in-out, background-color .3s ease-in-out
.burger-line-2
transition: width .3s ease-in-out, background-color .3s ease-in-out
.burger-line-3
transition: background-color .3s ease-in-out
.burger-active
& > div background-color: $env-secondary .burger-line-1 width: 8px // reduce by 17 px .burger-line-2 width: 17px // reduce by 8 px
// For links as the slider opens // the timings are set in mobile-nav-slider.js @keyframes navLinksFade
from opacity: 0 transform: translateY(20px) to opacity: 1 transform: translateY(0)