ハンバーガーメニューが表示されているページで、関係ないボタンを押すと一瞬メニューが開いてしまう

WordPressでスマホヘッダーにハンバーガーメニューを置いたサイトを作っているのですが、全く関係ないボタン
（例：ヘッダーではない場所に配置されているお問い合わせボタン）を押すだけでハンバーガーメニューが開こうとしてしまい、画面がチラついてしまいます。
ヘッダーのアイコンを押さない限り、開かないようにしたいのですが、原因に当たりがつかずご教示頂けますと大変助かります。
ハンバーガーメニューのイメージ
（灰色の部分は画面を隠しているだけで、実際は黒透明のオーバーレイです）

HTML
1			<div class="sp">
2	    	<div id="nav-drawer">
3	     		<input id="nav-input" type="checkbox" class="nav-unshown">
4	      	<label id="nav-open" for="nav-input"><span></span></label>
5	      	<label class="nav-unshown" id="nav-close" for="nav-input">
6					<div class="icon_cancel"><span class="css-cancel"></span></div></label>
7	      	<div id="nav-content">
8	        	<nav class="sp">
9	            <ul class="headerLink sp">
10	                <li class="navTitle"><a href="/category/news">お知らせ</a></li>
11	                <li class="navTitle"><a href="/category/blog">ブログ</a></li>
12	                <li class="navTitle"><a href="/archive/casestudy">導入事例</a></li>
13	                <li class="navTitle"><a href="/company">会社情報</a></li>
14	                <li class="navTitle"><a href="/contact" target="_blank">お問い合わせ</a></li>
15	            </ul>
16	          </nav>
17	        </div>
18				</div>
19	     </div>

CSS
1#nav-drawer {
2    position: absolute;
3    top: 15px;
4    right: 15px;
5  }
6
7  /*チェックボックス等は非表示に*/
8  .nav-unshown {
9    display:none;
10  }
11
12  /*アイコンのスペース*/
13  #nav-open {
14    display: inline-block;
15    width: 30px;
16    height: 22px;
17    vertical-align: middle;
18  }
19
20  /*ハンバーガーアイコンをCSSだけで表現*/
21  #nav-open span, #nav-open span:before, #nav-open span:after {
22    position: absolute;
23    height: 3px;/*線の太さ*/
24    width: 25px;/*長さ*/
25    border-radius: 3px;
26    background: #555;
27    display: block;
28    content: '';
29    cursor: pointer;
30  }
31
32  #nav-open span:before {
33    bottom: -8px;
34  }
35  #nav-open span:after {
36    bottom: -16px;
37  }
38
39  /*閉じる用の薄黒カバー*/
40  #nav-close {
41    display: none;/*はじめは隠しておく*/
42    position: fixed;
43    z-index: 99;
44    top: 0;/*全体に広がるように*/
45    left: 0;
46    width: 100%;
47    height: 100%;
48    background: black;
49    opacity: 0;
50    transition: .3s ease-in-out;
51  }
52
53  /*中身*/
54  #nav-content {
55    overflow: auto;
56    position: fixed;
57    top: 0;
58    right: 0;
59    z-index: 9999;/*最前面に*/
60    width: 60%;/*右側に隙間を作る（閉じるカバーを表示）*/
61    max-width: 330px;/*最大幅（調整してください）*/
62    height: 100%;
63    background: #030818;/*背景色*/
64    transition: .3s ease-in-out;/*滑らかに表示*/
65    -webkit-transform: translateX(120%);
66    transform: translateX(120%);/*右に隠しておく*/
67  }
68
69  /*チェックが入ったらもろもろ表示*/
70  #nav-input:checked ~ #nav-close {
71    display: block;/*カバーを表示*/
72    opacity: .5;
73  }
74
75  #nav-input:checked ~ #nav-content {
76    -webkit-transform: translateX(0%);
77    transform: translateX(0%);/*中身を表示（左へスライド）*/
78    box-shadow: 6px 0 25px rgba(0,0,0,.15);
79  }
80  .css-cancel{
81    display: inline-block;
82    position: relative;
83    margin: 0 20px 0 7px;
84    padding: 0;
85    width: 4px;
86    height: 20px;
87    background: #fff;
88    transform: rotate(45deg);
89  }
90  .css-cancel:before{
91    display: block;
92    content: "";
93    position: absolute;
94    top: 50%;
95    left: -8px;
96    width: 20px;
97    height: 4px;
98    margin-top: -2px;
99    background: #fff;
100  }
101
102  .icon_cancel {
103    display: inline-block;
104    position: absolute;
105    right: 60%;
106    top: 10px;
107}