.nav-bar { display: flex; flex-direction: column; padding: 8px 24px 14px; &--minimal { padding: 14px 24px; // Offset `@separator`'s top margin. margin-bottom: -1rem; } @include breakpoint($regular) { flex-direction: row; justify-content: space-between; align-items: center; } &__home-button { display: block; margin: 2px; // margin on this helps keep the focus outline within the viewport margin-bottom: 22px; img { width: 190px; } @include breakpoint($regular) { margin-bottom: 0; } @media print { float: right; min-width: initial; } } &__product-name { display: inline-block; vertical-align: top; font-weight: 400; color: $black; font-size: 30px; margin-top: 24px; } &__title { font-weight: 400; margin-top: 12px; margin-bottom: 12px; @include breakpoint($regular) { margin-left: 2rem; margin-right: auto; } & a { color: inherit; } @media print{ margin-left: 0px; margin-right: 0px; } } &__nav-menu { ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; justify-content: flex-start; margin-bottom: 20px; @include breakpoint($regular) { flex-direction: row; align-items: center; margin-bottom: 0; } li { margin-right: 10px; &:last-of-type { margin-right: 0; } } } .nav-menu__button { display: block; padding: 8px 0px; font-weight: 400; font-size: 14px; &:hover { text-decoration: underline dashed; text-underline-offset: 2px; } @include breakpoint($regular) { padding: 16px 6px; } } @media print{ display: none; } } @media print{ @include reset_print; } }