Wordpress上のカスタムjsで.fadeToggleが効かず、モバイルメニューが閉じない

前提・実現したいこと

PHPとjQuery初心者です。

現在WordpressのStockholmというテーマを使っているのですが、
モバイル用のハンバーガーメニューがあまり好きな形でないので、
カスタム仕様のフルスクリーンオーバーレイメニューを入れたいです。
そして、こちら（https://webdesignday.jp/inspiration/technique/html/4746/）の
コードを参考に、カスタムCSSとカスタムJSに追記したりPHPにHTMLタグを入れ込んだりして
トグルを開くところまでは来たのですが、
メニューをクリックしてバックグラウンドがリンク先にとんでも、
オーバーレイのメニュー画面が閉じません。
また、ハンバーガーメニューのアイコン部分をクリックしても、
一瞬オーバーレイメニューが消えますがすぐにまたオーバーレイごと再表示されます。

テーマ内の他のjsなどが影響しているのでしょうか。
参考元のサイトのデモでは問題なくtoggleがオンオフ作動しているようですし、
色々試すものの原因がわからずに立ち往生しています。
どなたかご教示いただけると嬉しいです。よろしくお願いいたします。

何か必要な情報が不足しておりましたら、追記可能ですのでおしらせください。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

HTMLのコードはPHPファイル（header-area.php）の元のメニュー該当部分に上書きして入れています。

HTML
1<?php } else { ?>
2
3<div>
4    <a class="menu">
5        <span class="menu__line menu__line--top"></span>
6        <span class="menu__line menu__line--center"></span>
7        <span class="menu__line menu__line--bottom"></span>
8    </a>
9  <nav class="gnav">
10        <div class="gnav__wrap">
11            <ul class="gnav__menu">
12                <li class="gnav__menu__item"><a href="###">Home</a></li>
13                <li class="gnav__menu__item"><a href="###">About</a></li>
14                <li class="gnav__menu__item"><a href="###">Portfolio</a></li>
15                <li class="gnav__menu__item"><a href="###">Photo</a></li>
16                <li class="gnav__menu__item"><a href="###">Shop</a></li>
17                <li class="gnav__menu__item"><a href="###">Contact</a></li>
18            </ul>
19        </div><!--gnav-wrap-->
20    </nav>
21</div>
22<?php } ?>

CSSとJSはカスタムCSSに追記する形です。

CSS
1/*menu*/
2.menu{
3    height: 20px;
4    position: absolute;
5    left: 26px;
6    top: 26px;
7    width: 30px;
8    z-index: 299;
9}
10.menu__line{
11    background: #666666;
12    display: block;
13    height: 2px;
14    position: absolute;
15    transition:transform .3s;
16    width: 100%;
17}
18.menu__line--center{
19    top: 9px;
20}
21.menu__line--bottom{
22    bottom: 0;
23}
24.menu__line--top.active{
25    top: 8px;
26    transform: rotate(45deg);
27}
28.menu__line--center.active{
29    transform:scaleX(0);
30}
31.menu__line--bottom.active{
32    bottom: 10px;
33    transform: rotate(135deg);
34}
35/*gnav*/
36.gnav{
37    background: rgba(200, 200, 23, 0.7);
38    display: none;
39    height: 100%;
40    position: fixed;
41    width: 100%;
42    z-index: 298;
43left: 0;
44}
45.gnav__wrap{
46    align-items:center;
47    display: flex;
48    height: 100%;
49    justify-content: center;
50    position: absolute;
51    width: 100%;
52}
53.gnav__menu__item{
54    margin: 40px 0;
55}
56.gnav__menu__item a{
57    color: #fff;
58    font-size: 2em;
59    font-weight: bold;
60    padding: 40px;
61    text-decoration: none;
62    transition: .5s;
63}
64.gnav__menu__item a:hover{
65    color: #666;
66}
67.gnav ul {
68list-style: none;
69}

また、jQueryのセレクタ（$）がコンフリクトで使えないので、
以下のようにjQueryに変更して使っています。

jQuery
1jQuery('.menu').on('click',function(){
2    jQuery('.menu__line').toggleClass('active');
3    jQuery('.gnav').fadeToggle();
4});
5

試したこと

jQuery
1jQuery(function() {
2  jQuery('.menu').on('click', function() {
3    if (jQuery(this).hasClass('active')){
4      jQuery(this).removeClass('active');
5      jQuery('.gnav').fadeOut( 1000 );
6    } else {
7      jQuery(this).addClass('active');
8      jQuery('.gnav').fadeIn( 1000 );
9    }
10  });
11});

→結果変わらず

その他、こちらで似たような状況のもので試せるものは試しましたが思うような結果が得られずにいます。

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

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

自己解決

色々試行錯誤した結果、若干強引ですが以下で解決しました。

jQuery
1jQuery('.menu').on('click',function(){
2    jQuery('.menu__line').addClass('active');
3    jQuery('.gnav').fadeIn();
4});
5
6jQuery('.gnav__menu__item a').on('click', function(){
7    jQuery('.menu__line').removeClass('active');
8    jQuery('.gnav').fadeOut();
9});