*, *::before, *::after{ margin: 0; padding: 0; box-sizing: border-box; } html{ font-size: 10px; font-family: "montserrat"; } header{ width: 100%; height: 100vh; background: #eee; position: relative; } .overlay{ width: 100%; height: 100vh; background-color: rgba(107, 65, 65, 0.85); transform: scale(0); opacity: 0; transition: opacity 1s; display: none; } .menu{ padding: 2rem 2.5rem; position: fixed; top: 1rem; right: 1rem; background-color: white; z-index: 999; border-radius: 3px; cursor: pointer; display: none; } .bar, .bar::before, .bar::after{ content:"" ; position: absolute; width: 3rem; height: 2px; background-color: mediumpurple; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transition: all 650ms; } .bar::before{ top:-2rem; } .bar::after{ top: 2rem; } .open .bar{ background-color: transparent; } .open .bar::before{ transform: rotate(45deg); } .open .bar::after{ transform: rotate(-45deg); } .open .bar::before .open .bar::after{ top: 0; } .mynav{ width: 100%; height: 6rem; line-height: 6rem; display: flex; justify-content: space-evenly; text-transform: uppercase; background-color: white; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.2); overflow: hidden; } a{ text-decoration: none; } .brand{ font-size: 1.5rem; color: white; background-color: mediumpurple; padding: 0 1rem; } .mynav .myul{ display: flex; list-style: none; } .nav-link{ font-size: 1.5rem; color: mediumpurple; margin-right: 2rem; padding: 0 1rem; display: block; position: relative; transform-style: preserve-3d; transform-origin: top; transition: transform 250ms cubic-bezier(0.55, 0.55, 0.675,0.19); } .nav-link:hover{ transform: rotateX(90deg); } .nav-item:last-child .nav-link{ margin-right: 0; } .nav-link::after{ background-color: mediumpurple; content: attr(data-text); position: absolute; left: 0; bottom: -100%; padding: inherit; color: wheat; transform: rotateX(-90deg); transform-origin: top; }