Почему не выезжает меню при клике на бургер?

Question

При нажатии на бургер почему-то не выезжает меню. Изначально меню скрыто через transform: translateX(100%) и появляется при клике на бургер и добавлением через JS класса menu-open с свойством translateX(0). В отладке видно, что класс menu-open добавляется. Так же я сделал, чтобы при появлении меню весь контент съезжал на 300px , может это как-то препятствует появлению меню.

Весь код https://jsfiddle.net/90gsdco8/1/

Сайт ilyin1ib.beget.tech

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

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

<header>
        <div class="wrapper">
            <a href="#" class="logo">
                Inter-Web
            </a>
            <nav class="menu">
                <ul>
                    <li><a href="#">Главная</a>
                        <ul class="sub_menu">
                            <li><a href="#">Брендинг</a></li>
                            <li><a href="#">Вэб-разработка</a></li>
                            <li><a href="#">Медиа-маркетинг</a></li>
                            <li><a href="#">Комплексное<br>продвижение</a></li>
                        </ul>
                    </li>
                    <li><a href="#">О нас</a></li>
                    <li><a href="#">Услуги</a>
                    <li><a href="#">Порядок работы</a></li>
                    <li><a href="#">Этапы работы</a></li>
                    <li><a href="#">Портфолио</a></li>
                    <li><a href="#">Новости</a></li>
                    <li><a href="#">Контакты</a></li>
                </ul>
            </nav>
            <div class="contacts">
                <div class="phone-block">
                    <a class="number" href="tel:88005569874">8 800-556-98-74</a>
                    <button class="request open-popup">Заказать звонок</button>
                </div>
                <div class="social-block">
                    <i class="fab fa-viber"></i>
                    <i class="fab fa-telegram-plane"></i>
                    <i class="fab fa-whatsapp"></i>
                </div>
            </div>
            <div class="hamburger_wrapper">
                <div class="hamburger hamburger--spin">
                    <div class="hamburger-box">
                        <div class="hamburger-inner"></div>
                    </div>
                </div>
            </div>
    </header>

БЛОГ НА HUSL

Почему не выезжает меню при клике на бургер?

Ответы (0 шт):