.app-header { align-items: center; visibility: visible; background: $gallery; padding: 6px 8px; height: 12vh; max-height: 60px; position: relative; z-index: 12; @media screen and (max-width: 575px) { position: fixed; height: 34px; width: 100%; box-shadow: 0 2px 2px 1px rgba(0, 0, 0, .08); z-index: 30; } } .app-header h1 { font-family: 'Montserrat Regular'; text-transform: uppercase; color: #22232c; // $shark } h2.page-subtitle { font-family: 'Montserrat Regular'; text-transform: uppercase; color: #aeaeae; font-size: 1em; margin: 12px; } .network-component-wrapper { display: flex; flex-direction: row; align-items: center; @media screen and (min-width: 576px) { margin-bottom: 1.8em; } } .left-menu-wrapper { display: flex; flex-direction: row; align-items: center; @media screen and (min-width: 576px) { margin-bottom: 1.8em; } }