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

This is a animated overlay navbar created by @afzalimdad9

body {
  margin: 0;
}

.menuBurger {
  width: 3vmax;
  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;
  gap: 0.5vmax;
}

.menuBurgerItem {
  height: 0.3vmax;
  width: 2.8vmax;
  border-radius: 30px;
  transition: all 0.4s;
}

.menuBurgerItem1 {
  transform: rotateZ(45deg);
  top: 2vmax;
  position: absolute;
}

.menuBurgerItem2 {
  transform: translateX(-200%);
}

.menuBurgerItem3 {
  transform: rotateZ(-45deg);
  top: 2vmax;
  position: absolute;
}

/*-------------------------- Navbar-------------------------- */
.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(0vw);
  }
}

@keyframes LogoleftOut {
  from {
    transform: translateX(0vw);
  }

  to {
    transform: translateX(-100vw);
  }
}

@keyframes LinkIn {
  from {
    transform: translateY(-100vw);
  }

  to {
    transform: translateY(0vw);
  }
}

@keyframes LinkOut {
  from {
    transform: translateY(0vw);
  }

  to {
    transform: translateY(-100vw);
  }
}

@keyframes IconIn {
  from {
    transform: translateX(100vw);
  }

  to {
    transform: translateX(0vw);
  }
}

@keyframes IconOut {
  from {
    transform: translateX(0vw);
  }

  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;
  }
}