@afzalimdad9/overlay-navbar/dist/lib/ReactNavbar.min.css

This is a animated overlay navbar created by @afzalimdad9

body{margin:0}.menuBurger{width:3vmax;gap:0.5vmax;position:fixed;top:2vmax;left:2vmax;display:flex;flex-direction:column;justify-content:space-between;align-items:center;cursor:pointer;padding:1vmax;z-index:1000}.menuBurgerItem{height:.3vmax;width:2.8vmax;border-radius:30px;transition:all .4s}.menuBurgerItem1{transform:rotateZ(45deg);top:2vmax;position:absolute}.menuBurgerItem2{transform:translateX(-200%)}.menuBurgerItem3{transform:rotateZ(-45deg);top:2vmax;position:absolute}.nav{display:flex}.nav1,.nav2,.nav3,.nav4{padding:2vmax;height:100vh;width:25%;box-sizing:border-box;font-family:Roboto;z-index:100;position:fixed;display:flex}.nav1{left:0}.nav2{left:25%}.nav3{left:50%}.nav4{left:75%}@keyframes LogoleftIn{from{transform:translateX(-100vw)}to{transform:translateX(0)}}@keyframes LogoleftOut{from{transform:translateX(0)}to{transform:translateX(-100vw)}}@keyframes LinkIn{from{transform:translateY(-100vw)}to{transform:translateY(0)}}@keyframes LinkOut{from{transform:translateY(0)}to{transform:translateY(-100vw)}}@keyframes IconIn{from{transform:translateX(100vw)}to{transform:translateX(0)}}@keyframes IconOut{from{transform:translateX(0)}to{transform:translateX(100vw)}}@media screen and (max-width:800px){.nav1{flex-direction:column}.nav2{flex-direction:column!important;justify-content:center!important}.nav3{flex-direction:column!important;justify-content:center!important}.nav4{flex-direction:column!important;justify-content:center!important}.logoReactNavbar{width:200%!important}.linksReactNavbar{font-size:2vmax!important}}