nav { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 50px; border-bottom: 1px solid black; } nav a img, ul img { width: 53px; } .menu-control, .label-icon, ul img { display: none; } .menu { display: flex; list-style: none; } .menu li { margin-right: 50px; cursor: pointer; } @media (max-width: 750px) { nav { flex-direction: row-reverse; } .label-icon, ul img { display: block; } .label-icon { margin-left: 10px; cursor: pointer; } .label-icon img { height: 30px; } .menu { top: 0; padding-top: 50px; width: 200px; justify-content: flex-start; align-items: center; text-align: center; flex-direction: column; position: fixed; right: 0; background-color: #fff; height: 100%; z-index: 1; box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.4); transform: translateX(110%); transition: transform 0.5s ease; } .menu li { margin-top: 30px; } .menu-control:checked + .menu { transform: translateX(0); } } @media (max-width: 350px) { .menu { width: calc(25px + 50%); } }