old.xevion.github.io/_scss/partials/_mobileMenu.scss

#toggle {
  position: fixed;
  top: 25px;
  right: 25px;
  height: $button-height;
  width: $button-width;
  cursor: pointer;
  z-index: 100;
  display: none;
  transition: opacity 0.25s ease;
  @include MQ(M) {
    display: block;
  }
  &:hover, &:focus {
    opacity: 0.7;
  }
  &.active {
    .line {
      background: $white;
    }
    .top {
      transform: translateY(10px) translateX(0) rotate(45deg);
    }
    .middle {
      opacity: 0;
    }
    .bottom {
      transform: translateY(-10px) translateX(0) rotate(-45deg);
    }
  }
  .line {
    background: $white;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    width: 100%;
    height: 3px;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.35s ease;
    &.middle {
      top: 10px;
    }
    &.bottom {
      top: 20px;
    }
  }
}

.overlay {
  position: fixed;
  background: rgba(0, 183, 199, 0.95);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  z-index: 10;
  transition: all 0.3s ease;
  @include MQ(M) {
    &.open {
      height: 100%;
      z-index: 10;
      opacity: 1;
      visibility: visible;
      overflow: hidden;
      .menu-item {
        animation: fadeInTop 0.5s ease forwards;
        animation-delay: 0.35s;
        &:nth-of-type(2) {
          animation-delay: 0.4s;
        }
        &:nth-of-type(3) {
          animation-delay: 0.45s;
        }
        &:nth-of-type(4) {
          animation-delay: 0.5s;
        }
        &:nth-of-type(5) {
          animation-delay: 0.55s;
        }
        &:nth-of-type(6) {
          animation-delay: 0.6s;
        }
        &:nth-of-type(7) {
          animation-delay: 0.65s;
        }
      }
    }
  }

  .logo {
    color: $white;
    font-family: $Chronicle, $serif-stack;
    font-size: 30px;
    margin: 14px 20px;
    @include MQ(S400) {
      font-size: 24px;
      margin: 17px 20px;
    }
    .logo-img {
      width: 35px;
      margin-right: 10px;
      position: relative;
      top: 5px;
      @include MQ(S400) {
        width: 30px;
        top: 5px;
      }
    }
  }
  .overlay-menu {
    position: relative;
    height: 70%;
    transform: translateY(-50%);
    top: 45%;
    font-size: 1.5em;
    font-family: $Gotham, $sans-serif-stack;
    font-weight: 700;
    text-align: center;
    .menu-container {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      display: inline-block;
      position: relative;
      height: 100%;
      .menu-item {
        display: block;
        height: 14.25%;
        height: calc(100% / 7);
        min-height: 50px;
        position: relative;
        opacity: 0;
        a {
          position: relative;
          color: $white;
          text-decoration: none;
          text-transform: uppercase;
          overflow: hidden;
          &:before,
          &:after {
            content: '';
            position: absolute;
            width: 0%;
            height: 2px;
            top: 50%;
            background: $white;
            margin-top: -2px;
            left: -3px;
          }
          &:after {
            transition: width 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
          }
          &:hover, &:focus {
            &:before,
            &:after {
              width: 105%;
            }
            &:before {
              transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
            }
            &:after {
              background: transparent;
              transition: 0s;
            }
          }
        }
      }
    }
  }
}

@keyframes fadeInTop {
  0% {
    opacity: 0;
    bottom: 20%;
  }
  100% {
    opacity: 1;
    bottom: 0;
  }
}