nav { --nav-width: 20em; --nav-bg: lightgrey; --burger-size: 5em; --burger-weight: 3px; position: fixed; top: 0; left: 0; width: 0; z-index: 10; } .toggler { z-index: 21; height: var(--burger-size); width: var(--burger-size); align-items: center; justify-content: center; padding: 0.6rem; position: fixed; cursor: pointer; opacity: 0; } .hamburger { position: fixed; top: 0; left: 0; height: var(--burger-size); width: var(--burger-size); padding: 0.6rem; display: flex; align-items: center; justify-content: center; z-index: 20; opacity: 1; } .hamburger>div { position: relative; top: 0; left: 0; background: black; height: var(--burger-weight); width: 75%; transition: all 0.4s ease; color: #000; } .hamburger>div::before, .hamburger>div::after { content: ''; position: absolute; top: 10px; background: black; width: 100%; height: var(--burger-weight); transition: all 0.4s ease; } .hamburger>div::after { top: -10px; } .toggler:checked+.hamburger>div { background-color: var(--nav-bg); } .toggler:checked+.hamburger>div::before { top: 0; transform: rotate(45deg); background: black; } .toggler:checked+.hamburger>div::after { top: 0; transform: rotate(135deg); background: black; } .menu { height: 100vh; width: 0; visibility: hidden; } .toggler:checked~.menu { width: fit-content; height: fit-content; background-color: var(--nav-bg) !important; } .menu>ul { display: flex; flex-direction: column; position: fixed; width: 0; height: calc(100vh - var(--burger-size)); padding-left: 1em; padding-right: 1em; margin-top: var(--burger-size); visibility: hidden; background-color: var(--nav-bg); z-index: 10; } .menu>ul>li { list-style: none; padding: 0.5rem; } .menu>ul>li>a { color: black; text-decoration: none; font-size: var(--font-size); } .menu>ul>li>a:hover, .menu>ul>li>a.active { color: orange; } .toggler~.fill { visibility: hidden; width: 0; } .toggler:checked~.fill { background-color: var(--nav-bg); position: fixed; top: 0; left: 0; height: var(--burger-size); width: var(--nav-width); z-index: 10; transition: visibility .5s, width .5s; visibility: visible; } .toggler:checked~.menu>ul { width: var(--nav-width); opacity: 1; transition: visibility .5s, width .5s; visibility: visible; } @media screen and (max-width: 700px) { nav { --burger-size: 4em; } }