$header-height: 6.5rem; .site-header { background: $background; margin-bottom: 1rem; color: white; height: $header-height; } .site-header__content { height: 100%; display: flex; justify-content: space-between; align-items: center; } .site-header__nav { a { color: white; text-decoration: none; margin-right: 1.5rem; font-size: 1.1rem; } a:hover { opacity: 0.8; text-decoration: underline !important; } a:last-of-type { margin-right: 0; } } .site-header__title { height: 100%; } .site-header__brand { display: flex; justify-content: center; align-items: center; text-decoration: none; } .site-header__brand__name { font-size: 2rem; text-decoration: none; padding-top: 1.5rem; margin-left: 1rem; @extend .alt-font; } .site-header__brand__logo { display: flex; flex-direction: column; justify-content: center; svg { width: 10rem; } } @media (max-width: $md-breakpoint) { .site-header { height: auto; } .site-header .page-container { width: 100% !important; } .site-header__content { display: block; height: auto; padding: 0 !important; } .site-header__brand { padding-top: .5rem; } .site-header__title { padding-right: 1rem; } .site-header__nav { padding: 1rem 0; line-height: 2rem; display: flex; justify-content: center; } }