@media (max-width: 1024px) { nav { width: 10em } } @media (max-width: 1024px) { #listing.list .item.header, main { width: calc(100% - 13em) } } @media (max-width: 736px) { nav { top: 0; z-index: 99999; background: #fff; height: 100%; width: 13em; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); transition: .1s ease left; left: -14em; } nav.active { left: 0; } header .search-button, header>div:first-child>.action { display: inherit; } header img { display: none; } #listing.list .item.header, main { width: calc(100% - 2em); } main { margin: 0 1em; width: calc(100% - 2em); } #search { display: none; } #search.active { display: block; } }