wordpressでのハンバーガーメニューのjQueryクリックイベントが動かない

前提・実現したいこと

ワードプレスで作られたサイトの一部変更を行っています。
jQueryを利用してスマホ表示時のハンバーガーメニューを作っているのでが、メニューアイコンをクリックしても、メニューが開かず動かなくて困っています。
jQuery初心者です。
色々試しましたが半日かかっても解決しないため、ヒントなどご教授いただければ幸いです。

また、jQueryに関しては、他のイベントも設定しています。→スクロールするとメニュバーが画面TOPで固定される。や、ボタンをクリックすると自動的にスクロールされて画面のトップに戻る。　
→　これらは問題なく動きます。

なぜかハンバーガーメニューだけ動きません。

エラーメッセージ

consoleを見てもエラーメッセージはでてません。

該当のソースコード

ボタンをクリックするとメニューが開いて、後ろのコンテイナーは消すというイベントになってます。

jQuery
1
2  jQuery(function(){
3    jQuery('.hamburger-menu-btn').on('click', function(){
4      jQuery('.hamburger-menu').toggleClass('is-active');
5    });
6  });
7
8jQuery(function(){
9  jQuery('.hamburger-menu-btn').on('click', function(){
10    jQuery('.container').toggle()
11  });
12});
13

HTML
1<body>
2	<a href="<?php echo esc_url( home_url( '/' ) ); ?>#contact" class="btn_mails">
3		<img src="<?php echo get_template_directory_uri(); ?>/images/common/btn_fix.svg" alt="メールで相談">
4	</a>
5	<header>
6    <div class="wrapper">
7        <img class="header_img "src="<?php echo get_template_directory_uri(); ?>/images/takagiimg/sample_topimg.jpg">
8    <div  class="mobile_header">
9    <ul class="mobile_menu_logo">
10        <li><a href=""><i class="fas fa-home"></i><br>ホーム</a></li>
11        <li><a href=""><i class="fas fa-building"></i><br>会社概要</a></li>
12        <li><a href=""><i class="fas fa-envelope-open-text"></i><br>お問い合わせ</a></li>
13        <li><a class="hamburger-menu-btn"><i class="fas fa-bars"></i><br>MENU</a></li>
14    </ul>
15    </div>
16    <div class="pc_menu_bar">
17      <div class="pc_header">
18          <span class="pcmenu_logo">
19            <img src="<?php echo get_template_directory_uri(); ?>/images/samplelogo.png">
20          </span>
21          <div class="pcmenu_list">
22            <ul class="pcmenu_list_ul">
23              <li><a href=""><span class="pcmenu_list_en">SERVICE</span><br>サービス</a></li>
24              <li><a href=""><span class="pcmenu_list_en">EXAMPLE</span><br>制作実績</a></li>
25              <li><a href=""><span class="pcmenu_list_en">STRONG</span><br>得意なこと</a></li>
26              <li><a href=""><span class="pcmenu_list_en">COMPANY</span><br>会社概要</a></li>
27              <li><a href=""><span class="pcmenu_list_en">COLUMN</span><br>コラム</a></li>
28              <li><a href=""><span class="pcmenu_list_en">CONTACT</span><br>お問い合わせ</a></li>
29            <ul>
30          </div>
31        </div>
32      </div>
33    </div>
34    </header>
35<article class="page single">
36  <div class="content_area">
37    <div class="bread">  
38      <div class="content_inner_are">
39        <div class="hamburger-menu">
40          <ul>
41            <li><a href="" class="menu__item"><span class="hamburger-menu-item-en">TOP</span><apan class="hamburger-menu-item-ja">トップ&emsp; <i class="fas fa-chevron-right"></i></i></apan></a></li>
42            <li><a href="" class="menu__item"><span class="hamburger-menu-item-en">SERVICE</span><apan class="hamburger-menu-item-ja">サービス&emsp; <i class="fas fa-chevron-right"></i></apan></a></li>
43            <li><a href="" class="menu__item"><span class="hamburger-menu-item-en">EXAMPLE</span><apan class="hamburger-menu-item-ja">制作事例&emsp; <i class="fas fa-chevron-right"></i></apan></a></li>
44            <li><a href="" class="menu__item"><span class="hamburger-menu-item-en">STRONG</span><apan class="hamburger-menu-item-ja">得意なこと&emsp; <i class="fas fa-chevron-right"></i></apan></a></li>
45            <li><a href="" class="menu__item"><span class="hamburger-menu-item-en">COMPANY</span><apan class="hamburger-menu-item-ja">会社概要&emsp; <i class="fas fa-chevron-right"></i></apan></a></li>
46            <li><a href="" class="menu__item"><span class="hamburger-menu-item-en">COLUMN</span><apan class="hamburger-menu-item-ja">コラム&emsp; <i class="fas fa-chevron-right"></i></apan></a></li>
47          </ul>
48          <a href="" class="hamburger-menu-item-btn">お問い合わせはこちら&emsp;<i class="fas fa-arrow-right"></i></a>
49      </div>
50 <div class="container">
51<!--コンテンツが入ります-->
52 </div>
53    </div>  
54  </div>
55</article>
56<?php get_footer();?>

CSS
1
2/*----------------------------
3* メニュー開閉ボタン
4*----------------------------*/
5.hamburger-menu-btn{
6  width: 40px;
7  height: 40px;
8  display: flex;
9  justify-content: center;
10  align-items: center;
11  color: #fff;
12}
13
14/*----------------------------
15* メニュー本体
16*----------------------------*/
17.hamburger-menu{
18  position: absolute;
19  z-index: 2;
20  width: 100%;
21  background: #ffffff;
22
23}
24.menu__item{
25  width: 100%;
26  height: auto;
27  padding: .5em 1em;
28  color: #333333;
29  box-sizing: border-box;
30}
31
32.hamburger-menu ul {
33  list-style: none;
34  padding: 0;
35}
36.hamburger-menu ul li {
37  border-bottom: 1px solid #bbb;
38  padding: 12px 21px 11px 21px;
39  
40}
41.hamburger-menu ul a {
42  display: block;
43  text-decoration: none;
44  display: flex;
45  justify-content: space-between;
46}
47.hamburger-menu-item-en{
48  font-size: 15px;
49  font-weight: 700;
50  margin-right: 15px;
51}
52.hamburger-menu-item-ja {
53  font-size: 11px;
54  font-weight: 500;
55}
56.hamburger-menu-item-btn {
57  display: block;
58  width: 287px;
59  height: 21px;
60  background-color: #333333;
61  color: #ffffff;
62  font-size: 12px;
63  text-align: center;
64  padding: 15px 24px;
65  text-decoration: none;
66  margin: 32px auto;
67}
68
69/*----------------------------
70* アニメーション部分
71*----------------------------*/
72
73/* アニメーション前のメニューの状態 */
74.hamburger-menu{
75  pointer-events: none;
76  opacity: 0;
77  transition: opacity .3s linear;
78}
79/* アニメーション後のメニューの状態 */
80.hamburger-menu.is-active{
81  pointer-events: auto;
82  opacity: 1;
83}

試したこと

・ワードプレスは＄は使えないとのことで、全て＄→jQueryにしてます。
・自分のデスクトップにHTML,CSS,JSファイルを作って、ブラウザで表示させて、実装させたところ、これは問題なく動きました。
→　これはワードプレスではないので、グーグルのCDNを利用しました。

・調べるとdocumentを使うという記事があったので、書き換えて見ましたが、やはり動きませんでした。以下のコードになります。

jQuery
1jQuery(function(){
2  jQuery(document).on('click', '.hamburger-menu-btn', function(){
3    jQuery('.hamburger-menu').toggleClass('is-active');
4  });
5});

・試しにconsole.log("OK"); を出力させようとしましたが、これは問題なく出ました。
・他にもコードを少し書き換えたりしてみましたが、どれもだめでした。

補足情報（FW/ツールのバージョンなど）

・例えばですが、下記のjQuery（メニュバーを画面TOPで固定する）は問題なく動きます。他にも書いてますが１例です。

jQuery
1jQuery(function() {
2    var nav = jQuery('.mobile_header');
3    //navの位置    
4    var navTop = nav.offset().top;
5    //スクロールするたびに実行
6    jQuery(window).scroll(function () {
7        var winTop = jQuery(this).scrollTop();
8        //スクロール位置がnavの位置より下だったらクラスfixedを追加
9        if (winTop >= navTop) {
10            nav.addClass('fixed')
11        } else if (winTop <= navTop) {
12            nav.removeClass('fixed')
13        }
14    });
15});