html
// &.search-open // body // nav // ul // li &.mobile-menu-open body nav border-bottom: solid $white border-width: 100vh transition: border-width 1s ease ul .mobile &.menu-button .menu-button-container .menu-button-line &#line-1 top: 6px transform: rotate(-45deg) &#line-2 width: 0 &#line-3 bottom: 6px transform: rotate(45deg) body nav z-index: 1 border-bottom: 0px solid $white border-width: 0 transition: border-width 1s ease width: 100% height: 80px @media screen and ($tablet) height: 60px background-color: $white position: fixed top: 0 left: 0 -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.16) -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.16) box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.16) display: flex align-items: center justify-content: center ul .mobile list-style-type: none height: 100% box-sizing: border-box display: none justify-content: center align-items: center &.menu-button position: relative z-index: 2 width: 25px &:hover cursor: pointer .menu-button-container .menu-button-line background-color: $blue .menu-button-container position: relative width: 100% height: 14px .menu-button-line width: 25px height: 2px background-color: $black position: absolute left: 0 &#line-1 top: 0 transition: top .3s ease, transform .3s ease, background-color .3s ease &#line-2 top: 6px transition: width .3s ease, background-color .3s ease &#line-3 bottom: 0 transition: bottom .3s ease, transform .3s ease, background-color .3s ease a text-decoration: none font-weight: 600 font-size: 13px color: $black transition: color .3s ease &:hover color: $blue transition: color .3s ease #search-icon .cls-2 stroke: $black transition: stroke .3s ease &:hover .cls-2 stroke: $blue transition: stroke .3s ease &.desktop-nav position: relative display: flex width: 100% height: 100% justify-content: space-between max-width: $max-width margin-left: $site-margin margin-right: $site-margin @media screen and ($mobile) margin-left: $site-margin/2 margin-right: $site-margin/2 li transition: opacity .3s ease, transform .3s ease list-style-type: none height: 100% box-sizing: border-box display: flex @media screen and ($tablet) display: none justify-content: center align-items: center &.mobile display: none @media screen and ($tablet) display: flex &.active border-top: 5px solid $white border-bottom: 5px solid $blue a color: $blue a text-decoration: none font-weight: 600 font-size: 15px @media screen and ($nav-breakpoint) font-size: 13px color: $black transition: color .3s ease &:hover color: $blue transition: color .3s ease #search-icon .cls-2 stroke: $black transition: stroke .3s ease &:hover .cls-2 stroke: $blue transition: stroke .3s ease div &.mobile-nav-content position: fixed z-index: 1 top: 50% transform: translateY(-50%) right: 0 display: none background: none width: 100vw justify-content: center align-items: center ul text-align: center display: flex height: 100% justify-content: center align-items: center flex-direction: column li list-style-type: none margin: 10px padding: 10px 0 transform: translateX(-10px) transition: opacity .3s ease, transform .3s ease opacity: 0 &.active border-bottom: 1px solid $blue a color: $blue a text-decoration: none font-weight: 600 font-size: 13px color: $black transition: color .3s ease &:hover color: $blue transition: color .3s ease #search-icon .cls-2 stroke: $black transition: stroke .3s ease &:hover .cls-2 stroke: $blue transition: stroke .3s ease