How can I change the animation of my menu drawer?

Store Design
, , , , , ,
1

Hi, I was trying to find answers about how to change animation of the menu drawer, since i wanted to change the default animation from Left to Right, to Top to Bottom

Here an demonstration of the animation i would like to do.

I would appreciated the help, thank you.

Website % Password: St0r3P4ssw0rd

2

To do that you need customize CSS and change transform attribute from translateX to translateY.

X: horizontal

Y: vertical

1 Like
3

I think i know what you mean.

@keyframes animateMenuOpen {
  0% {
    opacity: 0;
    transform: translateY(-1.5rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

found this on the base.css and i think i just have to change the way it translate?

4

I Solved it, thank you!!

I just needed to changed the X to Y in the header-drawer

.menu-drawer {
  transform: translateY(-100%) !important;
}