1.navとbuttonにclassとIDを付与する。
例

<nav class="header_nav" id="js_nav">
        <ul class="nav_ul">
          <li><a href="">About</a></li>
          <li><a href="">Service</a></li>
          <li><a href="">News</a></li>
          <li><a href="">Contact</a></li>
        </ul>
      </nav>
      <button class="openbtn" id="js-hamburger">
				<span></span>
				<span></span>
				<span></span>
			</button>

2.jQueryを使ってIDでclassを付与する。

$(function () {
const ham = $('#js-hamburger');
const nav = $('#js_nav');
ham.on('click', function () { //ハンバーガーメニューをクリックしたら
    ham.toggleClass('active'); // ハンバーガーメニューにactiveクラスを付け外し
    nav.toggleClass('active'); // ナビゲーションメニューにactiveクラスを付け外
    if (ham.hasClass('active') && nav.hasClass('active')) {
      $('body').addClass('scroll_non')
    } else {
      $('body').removeClass('scroll_non')
    }
})

※navにaタグがある場合は以下を記述する

li.on('click', function () { //ハンバーガーメニューをクリックしたら
    ham.toggleClass('active'); // ハンバーガーメニューにactiveクラスを付け外し
    nav.toggleClass('active'); // ナビゲーションメニューにactiveクラスを付け外
    $('body').toggleClass('scroll_non')
  });

3.SP版のnavのcssをイジる

@media screen and (max-width:768px) {
    body.scroll_non {
        overflow: hidden;
    }
}
.header_nav {
                height: 100vh;
                width: 100vw;
                flex-direction: column;
                position: fixed;
                top: 0;
                bottom: 0;
                display: flex;
                background: var.$header-background;
                left: -100%;
                transition: left .5s;
                z-index: 9999;

                .nav_ul {
                    display: flex;
                    height: 100vh;
                    justify-content: center;
                    list-style: none;
                    row-gap: 50px;
                    flex-direction: column;
                    width: auto;
                    margin: 20%;
                    padding: 0;
                    font-size: 2em;
                    text-align: center;
                }

ハンバーガーメニューのCSS

.openbtn {
                display: flex;
                position: relative;
                row-gap: 4px;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                position: relative;
                cursor: pointer;
                width: 40px;
                height: 40px;
                border-radius: 5px;
                border: 0;
                background-color: transparent;
                z-index: 9999;
            }

            .openbtn span {
                display: inline-block;
                transition: all .4s;
                left: 14px;
                height: 2px;
                border-radius: 5px;
                background: var.$color-white;
                width: 25px;
            }


            .openbtn span:nth-of-type(1) {
                position: absolute;
                top: 11px;
            }

            .openbtn span:nth-of-type(2) {
                position: absolute;
                top: 19px;
            }

            .openbtn span:nth-of-type(3) {
                position: absolute;
                top: 27px;
            }

            //クリック後バーガー
            .openbtn.active span:nth-child(1) {
                margin-left: 10px;
                background-color: rgb(246 246 246);
                transform: rotate(45deg) translate(-2px, 13px);
            }

            .openbtn.active span:nth-child(2) {
                opacity: 0;
            }

            .openbtn.active span:nth-child(3) {
                margin-left: 10px;
                background-color: rgb(246 246 246);
                transform: rotate(-45deg) translate(-1px, -14px);
            }