.navbar
z-index: 10 display: flex align-items: center justify-content: space-between min-height: 13vh position: fixed width: 100% background: $brand_sec box-shadow: 0 2px 3px -2px rgba($brand_main, 0.5) top: 0 transition: 0.3s ease all
.logo
font-family: 'Nerko One', Arial, Helvetica, sans-serif font-size: 2.4rem text-transform: uppercase letter-spacing: 2px color: $brand_main margin: 0 transition: 0.3s ease all &:hover color: $brand_light animation: .3s ease all
.nav-links
display: flex transition: 0.3s ease all li list-style-type: none a text-decoration: none color: $brand_main font-size: 1.3rem margin-left: 1.5rem position: relative a::after position: absolute content: "" bottom: -4px left: 0 height: 2px width: 0% background-color: $brand_light display: block a:hover color: $brand_light transition: 0.3s ease all a:hover::after width: 100% transition: 0.3s ease all
.nav-links.nav-active
transform: translateX(0%) !important
.hamburger-menu
cursor: pointer display: none transition: 0.3s ease all div width: 30px height: 4px background-color: $brand_main margin: 6px border-radius: 10px transition: 0.3s ease all
.navbar.sticky
background: $brand_sec transition: 0.3s ease all min-height: 10vh
@media (max-width: 725px)
.navbar .nav-links box-shadow: 2px 0px 3px -2px rgba($brand_main, 0.5) position: absolute top: 0 left: 0 height: 100vh width: 300px background: $brand_sec margin: 0 padding: 0 flex-direction: column align-items: center justify-content: space-evenly transform: translateX(-100%) z-index: 10 .hamburger-menu display: block z-index: 11 .bar-change .bar1 transform: rotate(-45deg) translate(-9px, 6px) .bar-change .bar2 opacity: 0 .bar-change .bar3 transform: rotate(45deg) translate(-9px, -5px)