Why doesn't the menu pop up when clicking on a burger?

Question

css

For some reason, when you click on a burger, the menu does not appear. Initially, the menu is hidden via transform: translateX(100%) and appears when you click on the burger and add the menu-open class via JS with the translateX(0) property. In debugging, you can see that the menu-open class is being added. I also made sure that when the menu appears, all content moves down by 300px , maybe this somehow prevents the menu from appearing.

All code https://jsfiddle.net/90gsdco8/1/

Website ilyin1ib.beget.tech

.menu {
        width:  300px;
        background: url(../img/menu-bg.jpg) center no-repeat;
        background-size:  cover;
        height: 100vh;
        position:  absolute;
        right: 0;
        top:  0;
        padding-right: 100px !important;
        transform:  translateX(100%);
        transition:  0.3s;
    }


.menu .open{
        transform: translateX(0);
    }

var $hamburger = $(".hamburger");
  $hamburger.on("click", function(e) {
      $(this).toggleClass("is-active");
      $('.menu').toggleClass('menu-open');
     	$('.bg ').toggleClass('bg_show');
     	$('.content').toggleClass('content_move');
  });

Answer 1

.menu .open{
        transform: translateX(0);
}

And you add the class menu-open
Change:

.menu-open{
        transform: translateX(0);
}

PS: isn't it too early to open a web studio?