How to undo javascript function

I have a function like so which toggles my dropdown menu.

<div class="module widget-handle mobile-toggle right visible-sm visible-xs">
  <a id="mobile-nav" href="#">
    <div class="container1" onclick="myFunction(this)">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>.
    </div>
  </a>
</div>
<script>
  function myFunction(x) {
    x.classList.toggle('change');
    document.body.style.overflow ='hidden'
  }
</script>

The last part of it

document.body.style.overflow = 'hidden'

Keeps the page from overflowing at the top when the dropdown menu is open. The problem is that when I click on my menu bars, whilst the overflow disappears, clicking on the bars again reveals the page but locks it due to the overflow being hidden.

I'd like to undo

document.body.style.overflow = 'hidden'

When the menu is closed and the closest I've got to understanding it is the function doBack. Can I somehow add doBack to my existing function?

Mobile page here

It's a WordPress site and the javascript above toggles the dropdown by pressing on the bars. In order to extend the dropdown, I made the class collapse bigger, like so.

@media (max-width: 768px) {
  .collapse {
    position: absolute;
    height: 775px;
    background-color: white;
    z-index: 99999 !important;
    top: 75px;
    left: -50px;
    line-height: 10px;
  }
}

HTML:

<div class="module-group right">
  <div class="module left">
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul id="menu" class="menu">
        <li id="menu-item-15050" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-15050 dropdown">
          <a title="Contact" href="url">Contact
            <ul role="menu" class="dropdow n-menu">
            </ul>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>