// Navigation styling for breakpoint 768 // Avoid declaring any styling like color etc. // These will be decalred in _sass/naviagtion/env/ // Everything here will be included in EVERY .html $brand-height: 55% @media screen and ( min-width: 1024px ) .navbar @include default-trans height: $navbar-height align-items: center .nav-scrolled @include default-trans top: -$navbar-height .nav-group-content @include default-trans height: 10vh .nav-brand @include default-trans height: 8vh top: 6vh .nav-brand @include default-trans display: flex position: absolute max-width: 160px height: 10vh z-index: 999 top: 7.5vh .site__logo position: absolute top: (100% - $brand-height) / 2 height: $brand-height .nav-list display: flex justify-content: flex-end align-items: center height: inherit top: 0 transform: none border-top: none height: 5vh padding: 0 background-color: inherit .nav-group padding: 0 2rem .nav-link align-items: center padding: 0 height: auto opacity: 1 margin: 0 overflow: hidden // Surround current link with lines .current--url &:before, &:after content: "" display: inline-block height: 2px position: relative vertical-align: middle width: 6% &:before right: 0.5em margin-left: -10% &:after left: 0.5em margin-right: -10% .nav-group-content @include default-trans align-items: center justify-content: flex-end position: absolute top: 5vh left: 0 width: 100vw padding: 0 height: $secondary-navbar-height backdrop-filter: blur(20px) .nav-group-content .nav-link margin: 0 .burger display: none