ハンバーガーメニューのコピペ

	(function () {
		const $hamburger = document.querySelector('.gnav_hamburger');
		$hamburger.addEventListener('click', function(){
			$hamburger.classList.toggle('is_active')
		});
		
		const $wrapper = document.getElementById('wrap');
		const $navBtn = document.getElementById('gnav-toggle');
		
		$navBtn.addEventListener('click', navToggle);
		
		function navToggle() {
			if ($wrapper.classList.contains('gnav_open')) {
				navCloseFunc();
			} else {
				navOpenFunc();
			}
		}
		function navOpenFunc() {
			$wrapper.classList.add('gnav_open');
		}
		function navCloseFunc() {
			$wrapper.classList.remove('gnav_open');
		}
	})();

	#gnav-toggle {
		display: block;
		width: calc(100 / 750 * 100vw);
		height: calc(100 / 750 * 100vw);
		background: black;
		border: none;
		position: fixed;
		top: 2.8vw;
		right: 2.8vw;
		z-index: 10000;
		outline: none;
	}
	.gnav_hamburger .gnav_text{
		width: 100%;
		text-align: center;
		letter-spacing: 0;
		font-size: calc(20 / 750 * 100vw);
		color: #fff;
		position: absolute;
		bottom: 1.5vw;
		left: 0; right: 0;
	}
	.gnav_hamburger .gnav_icon {
		width: calc(40 / 750 * 100vw);
		height: 2px;
		position: absolute;
		top: -3.5vw;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		background: #fff;
		transition: transform .3s ease-in-out;
	}
	.gnav_hamburger .gnav_icon:before, .gnav_hamburger .gnav_icon:after {
		content: "";
		width: 100%;
		height: 2px;
		position: absolute;
		left: 0;
		background: #fff;
		transition: transform .3s ease-in-out;
	}
	.gnav_hamburger .gnav_icon:before {top: -1.5vw;}
	.gnav_hamburger .gnav_icon:after {bottom: -1.5vw;}
	.is_active .gnav_icon {background: none;}
	.is_active .gnav_icon:before, .is_active .gnav_icon:after {transition: transform .3s ease-in-out;}
	.is_active .gnav_icon:before {transform: rotate(45deg);top: 0;}
	.is_active .gnav_icon:after {transform: rotate(-45deg);bottom: 0;}

	.gnav {
		width: 80%;
		padding: 25vw 0 0;
		overflow-y: auto;
		overflow-x: hidden;
		color: #333;
		background: rgba(255,255,255,.9);
		position: fixed;
		top: 0;
		right: 0;
		z-index: 9999;
		height: 100%;
		visibility: hidden;
		opacity: 0;
		transition: opacity .6s ease, visibility .6s ease;
		line-height: 1.45;
	}
	.gnav_open .gnav {
		visibility: visible;
		opacity: 1;
	}
	.gnav .menu-gnav-container{padding-bottom:  20vw;}
	.menu-gnav-container > ul {
		padding: 0 3vw;
		display: block;
	}
	.menu-gnav-container > ul > li {
		opacity: 0;
		border-bottom: 1px solid black;
		transform: translateX(50%);
		transition: transform .6s ease, opacity .2s ease;
	}
	.gnav_open .menu-gnav-container > ul > li{
		opacity: 1;
		transform: translateX(0);
		transition: transform 1s ease, opacity .9s ease;
	}
	.menu-gnav-container > ul > li:first-child {border-top: 1px solid black;}
	.menu-gnav-container > ul > li > a {
		display: block;
		width: 100%;
		padding: 3vw 4vw 2.5vw 5vw;
		position: relative;
	}
	.menu-gnav-container > ul > li > a:after {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		bottom: .25vw;
		width: 0;
		height: 0;
		border-left: calc(16 / 750 * 100vw) solid black;
		border-top: calc(12 / 750 * 100vw) solid transparent;
		border-bottom: calc(12 / 750 * 100vw) solid transparent;
		margin: auto;
	}

<div class="sm:hidden cover_gnav_hamburger">
<button type="button" id="gnav-toggle" class="gnav_hamburger ">
<span class="gnav_icon"></span>
<span class="gnav_text">MENU</span>
</button>
</div>
<div class="gnav ">
<?php
wp_nav_menu(
array(
'theme_location' => 'main-menu',
'container' => 'nav',
)
);
?>
</div>