ハンバーガーメニューが常時開いていて閉じられない

Question

前提・実現したいこと

WordPressで作成したサイトにて、ハンバーガーメニューが（どのページに遷移しても）常時開きっぱなしになり、閉じることができません。
ハンバーガーボタンを押した時にメニューが開き、閉じることができる状態にしたいのですが、
他サイトを参照し、CSSを編集したりしたのですが、一向に改善されず、困っております。

大変申し訳ないのですが、初心者のため、わかりやすく詳細に教えて頂ける方、何卒よろしくお願いいたします。

発生している問題

ハンバーガーメニューが常時開いた状態になり、閉じることができない

該当のソースコード

/* RESPONSIVE 設定
------------------------------------------------------------*/

@media only screen and (min-width: 760px){
	body{
		font-size:15px;
	}	
	
  a#menu{
		display:none;
	}

	.panel{
		display:block !important;
		padding-bottom: 50px;
	}
	#mainnav li{
		display: inline-block;
		position: relative;
		padding: 0 30px;
		font-size: 14px;
	}
	#mainnav li a{
		display: block;
	}
	#mainnav li ul{
		display: none;
	}	
	#mainnav li:hover ul{
  	display: block;
		position: absolute;
		width: 100%;
		top: 25px;
		left: 0;
		z-index: 500;
		background: rgba(255,255,255,.8)
	}
	#mainnav li li{
		padding: 10px;
		line-height: 1.5;
		border-bottom: 1px solid #fff;
		text-align: left;
	}

}

@media only screen and (min-width: 981px){
	.col3{
/*		margin: 0 -10px;*/
      margin: 20px auto;
	}

	.col3 > li{
		display: inline-block;
		width: 30%;
		margin-bottom: 50px;
		vertical-align: top;
		text-align: left;
	}
}


@media only screen and (max-width: 980px){
	.col3 > li{
		width: 80%;
		margin: 0 auto 30px;
	}
	.header{
		width: 80%;
		margin-bottom: 30px;
	}
  .header h1 span{
  		padding: 0 15px;
  }
	#mainImg img{
		margin-bottom: 0;
	}
	.innerS{
		width: 80%;
		padding-bottom: 30px;
	} 
}


@media only screen and (max-width: 799px){
	#header{
		position: fixed;
		width: 100%;
		z-index: 500;
	}	
	#headerWrap{
		position: relative;
		width: 100%;
		height: 70px;
		background: #fff;
		border-bottom: 1px solid #ccc;
	}	
	#logo{
		padding-top: 10px;
	}	
	#logo img{
		max-height: 45px;
		width: auto !important;
		transform: scale(1);
	}
  a#menu{
  	display: inline-block;
  	position: relative;
  	width: 40px;
  	height: 40px;
  	margin: 10px;
	}

	#menuBtn{
  	display: block;
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	width: 18px;
  	height: 2px;
  	margin: -1px 0 0 -7px;
  	background: #000;
  	transition: .2s;
	}
	#menuBtn:before, #menuBtn:after{
  	display: block;
  	content: "";
  	position: absolute;
  	top: 50%;
  	left: 0;
  	width: 18px;
  	height: 2px;
  	background: #000;
  	transition: .3s;
	}

	#menuBtn:before{
  	margin-top: -7px;
	}

	#menuBtn:after{
  	margin-top: 5px;
	}

	a#menu .close{
  	background: transparent !important;
	}

	a#menu .close:before, a#menu .close:after{
  	margin-top: 0;
	}

	a#menu .close:before{
  	transform: rotate(-45deg);
  	-webkit-transform: rotate(-45deg);
	}

	a#menu .close:after{
  	transform: rotate(-135deg);
  	-webkit-transform: rotate(-135deg);
	}

	.panel{
		width: 100%;
		display: none;
		overflow: hidden;
		position: relative;
		left: 0;
		top: 0;
		z-index: 100;
	}
	#mainnav{
		position: absolute;
		top: 0;
		width: 100%;
		text-align: right;
		z-index:800;
	}
	#mainnav ul{
		background: #fff;
		text-align: left;
	}
	#mainnav ul ul li{
		padding-left: 20px;
	}

	#mainnav li a{

		padding:15px 25px;
		border-bottom: 1px solid #ccc;
		color: #000;
		font-weight: 400;
	}	
	#mainnav li.menu-item-has-children a{
		border-bottom: 0;
	}
	#mainnav li.menu-item-has-children{
		border-bottom: 1px solid #ccc;
	}	
	#mainnav li a:before{
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 5px;
		width: 6px;
		height: 6px;
		margin: -4px 0 0 0;
		border-top: solid 2px #000;
		border-right: solid 2px #000;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	#mainImg{
		padding-top: 70px;
		z-index: -100;
	}
	#mainImg .msg {top: 90px;left: calc(50% - 150px);}
	section{
		padding-top: 100px;
	}
	section#toppage{
		padding-top: 30px;
	}
	section h2{
		margin: 0 auto 20px;
	}
	section h2 span {
		padding: 0 30px;
	}
	.alignright, .alignleft{
	  float: none;
		display: block;
		margin: 10px auto;	
	}
}

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

使用したテンプレートは「tpl_090_rwd」です。
その他必要な情報等ございましたら、お知らせいただけると助かります。

Comments

[momotuwo]

html/jsも記載いただかないと
回答がつきにくいかと思います。

Answer 1

まず、初期状態で、メニューを非表示にするのはどうでしょうか。

開いているメニューの要素を、スタイルシートで display: none; とすると、非表示になると思います。

ハンバーガーボタンを押した時にメニューが開き

そうですね、ハンバーガーボタンを押したときに、「ボタンが押された」ということをJavaScriptで検出することができます。

JavaScirptでクリックイベントを検出して、
メニューの要素を、display: block; に戻してあげると、実現できそうに思います。