.page { position: relative; display: flex; flex-direction: column; } main { flex: 1; } .sidebar { background-image: linear-gradient(180deg, #34495e, #2c3e50 70%); } .top-row { background-color: #f7f7f7; border-bottom: 1px solid #d6d5d5; justify-content: flex-end; height: 3.5rem; display: flex; align-items: center; } .top-row ::deep a, .top-row .btn-link { white-space: nowrap; margin-left: 1.5rem; } .top-row a:first-child { overflow: hidden; text-overflow: ellipsis; } @media (max-width: 640.98px) { .top-row:not(.auth) { display: none; } .top-row.auth { justify-content: space-between; } .top-row a, .top-row .btn-link { margin-left: 0; } } @media (min-width: 641px) { .sidebar { display:flex; height: 80px; align-items:center; position: sticky; justify-content: center; /*top: 0;*/ } .top-row { position: sticky; top: 0; z-index: 1; } .top-row, article { padding-left: 2rem !important; padding-right: 1.5rem !important; } }