モバイルメニューの閉じるをクリックしても閉じない

実現したいこと・発生している問題

Wordpressでモバイル用のハンバーガーメニューを作っていますが、
なぜかjQueryの.toggleが効かずリンク先に遷移してもメニューが閉じないので、

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

ではなく、

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

に書き換えたところ、リンク先に飛ぶときちんとオーバーレイが消えるようになりました。
ところが今度は左上のハンバーガーメニューの『×』をクリックしてもメニューが閉じなくなりました。
該当する.menuにtoggleを当ててないので当然だと思いますが、
.menuにtoggleを当てようと思ってもうまくいきません。
最初のコード

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

の時にはきちんとハンバーガーメニューを押したら消えてくれていました。
どのように書けばハンバーガーメニューを押しても消えるようになるでしょうか。

該当のソースコード

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="###">Contact</a></li>
15            </ul>
16        </div><!--gnav-wrap-->
17    </nav>
18</div>
19<?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
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});

試したこと

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

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

回答1件

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