nav-menu { display: none; } @media (max-width: 950px) { /* # Overrides */ body.menu-open { overflow: hidden; } /* ## Header */ body.menu-open header { background-color: var(--color-accent); } body.menu-open header nav p { color: white; } /* # Nav menu */ nav-menu { top: var(--running-size); left: 0; width: 100%; overflow-y: scroll; height: calc(100svh - var(--running-size)); display: none; position: fixed; align-items: center; flex-direction: column; background-color: white; } nav-menu.active { display: flex; } /* ## Sections */ nav-menu nav { gap: calc(var(--padding) / 2); width: 100%; max-width: 600px; display: flex; padding: var(--padding); flex-direction: column; } nav-menu nav:last-child { margin-top: auto; } nav-menu nav.horizontal { gap: var(--padding); flex-direction: row; justify-content: center; } }