.navigation { top: 0; left: 0; background-color: $white; box-shadow: 0 1px 5px rgba($black, 0.1); position: fixed; width: 100%; z-index: 10; > div:first-of-type { align-items: stretch; display: flex; flex-flow: row wrap; } } .navigation__item { overflow: hidden; padding-right: 0.5rem; padding-left: 0.5rem; position: relative; &:first-of-type { @include hide-text; width: 10rem; height: 3rem; background-image: url("../media/svg/logo.svg"); background-repeat: no-repeat; background-size: contain; flex: 1; top: 0.5rem; } &:not(:first-of-type) { color: inherit; font-size: 1rem; line-height: 4rem; &::after { width: 100%; height: 3px; background-color: mix($black, $teal, 15%); content: ""; left: 0; position: absolute; transition: bottom 0.2s; } &:not(:hover) { &::after { bottom: -3px; } } &:hover, &.router-link-active { &::after { bottom: 0; } } } }