#menu-bar { display: none; } header label { font-size: 18px; margin: 8px 0; cursor: pointer; } .menu { position: absolute; top: 70px; left: 0; width: 100%; height: 100vh; background: #d2183f; transition: all 0.5s; transform: translateX(-100%); } .menu a { display: block; color: #d2183f; height: 50px; text-decoration: none; padding: 15px; border-bottom: 1px solid #ccc; } .menu a:hover { color: #3CC; } #menu-bar:checked ~ .menu { transform: translateX(0%); } @media (min-width:800px) { .menu { position: static; width: auto; height: auto; transform: translateX(0%); display: flex; text-align: center; background: #d2183f; color: #d2183f; } .menu a { border: none; color: #d2183f; } .menu a:hover { color: #138f8f; background: none; } .menu ul{ list-style: none; display: inline-block; position: relative; left: 50%; } .menu ul li{ float: left; margin-top: 20px; position: relative; right: 50%; } header label { display: none; }