Почему не работает меню на мобильном разрешении?

Нашел меню для мобильных версий, скопировал, переименовал классы, стили писал лишь нужные, но почему-то не работает.

Ссылка на сайт

Ссылка на кодпен, откуда копировал код

МойJS-код:

$(document).ready(function () {
//OPEN TRIGGER
var openTrigger = $('.page-header__open-trigger');
var openTriggerTop = openTrigger.find('.page-header__open-bar--top');
var openTriggerMiddle = openTrigger.find('.page-header__open-bar--middle');
var openTriggerBottom = openTrigger.find('.page-header__open-bar--bottom');
//CLOSE TRIGGER
var closeTrigger = $('.page-header__close-trigger');
var closeTriggerLeft = closeTrigger.find('.page-header__close-bar--left');
var closeTriggerRight = closeTrigger.find('.page-header__close-bar--right');
//MENU
var menuContainer = $('.main-nav__list-wrapper');
var menu = $('.main-nav__list');
var menuTop = $('.main-nav__background--top');
var menuMiddle = $('.main-nav__background--middle');
var menuBottom = $('.main-nav__background--bottom');
//TL
var tlOpen = new TimelineMax({paused: true});
var tlClose = new TimelineMax({paused: true});
//OPEN TIMELINE
tlOpen.add("preOpen")
    .to(logo, 0.4, {
        scale: 0.8,
        opacity: 0,
        ease: Power2.easeOut
    }, "preOpen")
    .to(openTriggerTop, 0.4, {
        x: "+80px", y: "-80px", delay: 0.1, ease: Power4.easeIn, onComplete: function () {
            closeTrigger.css('z-index', '25');
        }
    }, "preOpen")
    .to(openTriggerMiddle, 0.4, {
        x: "+=80px", y: "-=80px", ease: Power4.easeIn,
        onComplete: function () {
            openTrigger.css('visibility', 'hidden');
        }
    }, "preOpen")
    .to(openTriggerBottom, 0.4, {
        x: "+=80px", y: "-=80px", delay: 0.2, ease: Power4.easeIn
    }, "preOpen")
    .add("open", "-=0.4")
    .to(menuTop, 0.8, {
        y: "13%",
        ease: Power4.easeInOut
    }, "open")
    .to(menuMiddle, 0.8, {
        scaleY: 1,
        ease: Power4.easeInOut
    }, "open")
    .to(menuBottom, 0.8, {
        y: "-114%",
        ease: Power4.easeInOut
    }, "open")
    .fromTo(menu, 0.6, {
        y: 30, opacity: 0, visibility: 'hidden'
    }, {
        y: 0, opacity: 1, visibility: 'visible', ease: Power4.easeOut
    }, "-=0.2")
    .add("preClose", "-=0.8")
    .to(closeTriggerLeft, 0.8, {
        x: "-=100px", y: "+=100px", ease: Power4.easeOut
    }, "preClose")
    .to(closeTriggerRight, 0.8, {
        x: "+=100px", y: "+=100px", delay: 0.2, ease: Power4.easeOut
    }, "preClose");
//CLOSE TIMELINE
tlClose.add("close")
    .to(menuTop, 0.2, {
        backgroundColor: "#6295ca", ease: Power4.easeInOut, onComplete: function () {
            logo.css('z-index', '26');
            closeTrigger.css('z-index', '5');
            openTrigger.css('visibility', 'visible');
        }
    }, "close")
    .to(menuMiddle, 0.2, {
        backgroundColor: "#6295ca", ease: Power4.easeInOut
    }, "close")
    .to(menuBottom, 0.2, {
        backgroundColor: "#6295ca", ease: Power4.easeInOut
    }, "close")
    .to(menu, 0.6, {
        y: 20, opacity: 0, ease: Power4.easeOut, onComplete: function () {
            menu.css('visibility', 'hidden');
        }
    }, "close")
    .to(logo, 0.8, {
        scale: 1, opacity: 1, ease: Power4.easeInOut
    }, "close", "+=0.2")
    .to(menuTop, 0.8, {
        y: "-113%",
        ease: Power4.easeInOut
    }, "close", "+=0.2")
    .to(menuMiddle, 0.8, {
        scaleY: 0,
        ease: Power4.easeInOut
    }, "close", "+=0.2")
    .to(menuBottom, 0.8, {
        y: "23%",
        ease: Power4.easeInOut,
        onComplete: function () {
            menuTop.css('background-color', '#ffffff');
            menuMiddle.css('background-color', '#ffffff');
            menuBottom.css('background-color', '#ffffff');
        }
    }, "close", "+=0.2")
    .to(closeTriggerLeft, 0.2, {
        x: "+=100px", y: "-=100px", ease: Power4.easeIn
    }, "close")
    .to(closeTriggerRight, 0.2, {
        x: "-=100px", y: "-=100px", delay: 0.1, ease: Power4.easeIn
    }, "close")
    .to(openTriggerTop, 1, {
        x: "-=80px", y: "+=80px", delay: 0.2, ease: Power4.easeOut
    }, "close")
    .to(openTriggerMiddle, 1, {
        x: "-=80px", y: "+=80px", ease: Power4.easeOut
    }, "close")
    .to(openTriggerBottom, 1, {
        x: "-=80px", y: "+=80px", delay: 0.1, ease: Power4.easeOut
    }, "close");
//EVENTS
openTrigger.on('click', function () {
    if (tlOpen.progress() < 1) {
        tlOpen.play();
    } else {
        tlOpen.restart();
    }
});
closeTrigger.on('click', function () {
    if (tlClose.progress() < 1) {
        tlClose.play();
    } else {
        tlClose.restart();
    }
   });
 });