transformで外に非表示させているものがスクロールで見えてしまう

前提・実現したいこと

初めてこちらのサイト利用いたします。
不備がありましたら申し訳ございません。

ワードプレスの自作でハンバーガーメニュー作成しいます。
transformで画面より100%外へ押し出し非表示にしている要素menuがあるのですが、
スマホでその分だけスワイプできてしまい、ボタン押さずともスライドできてしまいます。
非表示にしている部分をハンバーガーボタンを押すまで完全に非表示（スワイプできない状態）にしたいのですが
うまくいきません。何かアドバイス頂ければ助かります。

css

body {
    margin: 0;
    padding: 0;
    height: 100%;
}
main{
    margin: 0;
    padding: 0;
    height: 100%;
	background-color: #ffffff;
	z-index: 1;
    transform:translate3d(0,0,0); 
}

/*ロゴの大きさを調整*/
#logo img{
  width:30vw;
  display:block;
  margin:0 auto;
}
 
nav{
 width: 100%;
 height: 70px;
 position: relative;
 background: #F6F6F6;
}

.drawer{
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: space-between;
 position: relative;
 height: 70px;
 padding: 0 1em;
}
 
/*ナビゲーション部分*/

.menu ul li a {
display:block;
  font-weight:bold;
padding: 2em;
border-bottom: 1px dotted #CCC;
  color:#333;
  text-decoration:none;
}
 
.menu ul li a:hover
{background-color:rgba(0,0,0,0.5);
color:orange;}
 

.menu{
  text-align:center;
  background-color:rgba(255,255,255,0.5);
  transition: 0.5s ease;
  -webkit-transform: translateX(100%);
}
 
/*OPEN時の動き*/
.menu.open {
 -webkit-transform: translateX(0%);
 transform: translateX(0%);/*メニューを元の位置へ戻す*/
	position: relative;
    z-index: 4;
}

HTML

<nav>
<div class="drawer">
<div id="logo"><a href="#"><img src="<?php bloginfo('template_directory');?>/images/logo.svg" alt="" /></a></div> 
<!-- ハンバーガーメニュー部分 --> 
<div class="Toggle">
　　<span></span>
　　<span></span>
　　<span></span>
</div>
  </div>
 <!-------------- drawer ここまで-->
 
 <div class="menu">
  <ul>
   <li><a href="#">会社概要</a></li>
   <li><a href="#">サービス</a></li>
   <li><a href="#">店舗案内</a></li>
   <li><a href="#">お問い合わせ</a></li>
  </ul>
 </div>
</nav>