$nav_bar_height: 80px; nav { width: 100%; height: $nav_bar_height; position: fixed; z-index: 1; background-color: transparent; transition: background-color 0.5s, box-shadow 0.5s; > a { align-items: center; text-decoration: none; display: flex; float: left; span { color: $accent-color; font-family: $title-font; font-size: 200%; } img { width: $nav_bar_height; height: $nav_bar_height; padding: 10px; box-sizing: border-box; } } &#scrolled, &:hover { background-color: transparentize($background-color, $opacity); a { color: $foreground-color; text-shadow: 0 0 5px transparent; } } > ul { height: 100%; margin: 0; padding: 0; text-align: right; > li { display: inline-block; height: 100%; margin-right: 20px; &#mobileLogo { display: none; } > a { text-decoration: none; display: flex; align-items: center; height: 100%; padding: 0 10px; transition: box-shadow 0.2s, color 0.2s, text-shadow, 0.2s; color: $transparent-nav-bar-text-color; text-shadow: 0 0 5px invert(grayscale($transparent-nav-bar-text-color)); &:hover, &.currentPage { box-shadow: 0 -5px $accent-color inset; } } } } }