Burger-menu covers content when closed. How to raise content with JS?

Question

JavaScript

There is such a Burger-menu (I attach all the code below). It works fine, but the problem is that when closed in the mobile version, the entire container of this menu is above the main content. There was an attempt to solve the issue using the CSS z-index property, but here I can only set it for both states at the same time (closed and open menu). I suspect it is possible with JS to set the Z-index for the open state to the highest and for the closed state to be low, so that the content is higher. But I don’t know how to do this, because. JS I don't know. Help, please, to solve a problem.

var button = document.getElementById('hamburger-menu'),
    span = button.getElementsByTagName('span')[0];

button.onclick =  function() {
  span.classList.toggle('hamburger-menu-button-close');
};

$j('#hamburger-menu').on('click', toggleOnClass);

function toggleOnClass(event) {
  var toggleElementId = '#' + $j(this).data('toggle'),
  element = $j(toggleElementId);
  element.toggleClass('on');
}

// close hamburger menu after click a
$j( '.menu li a' ).on("click", function(){
  $j('#hamburger-menu').click();
});

And styles for it:

.hamburger-menu-button-open {
    top: 50%;
    margin-top: -1px;
    left: 50%;
    margin-left: -12px;
  }
  .hamburger-menu-button-open, 
  .hamburger-menu-button-open::before, 
  .hamburger-menu-button-open::after {
    position: absolute;
    width: 24px;
    height: 2px;
    background: #fff;
    border-radius: 4px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .hamburger-menu-button-open::before, 
  .hamburger-menu-button-open::after {
    left: 0;
    content: "";
  }
  .hamburger-menu-button-open::before {
    top: 6px;
  }
  .hamburger-menu-button-open::after {
    bottom: 6px;
  }
  .hamburger-menu-button-close {
    background: transparent;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  .hamburger-menu-button-close::before {
    -webkit-transform: translateY(-6px) rotate(45deg);
    transform: translateY(-6px) rotate(45deg);
  }
  .hamburger-menu-button-close::after {
    -webkit-transform: translateY(6px) rotate(-45deg);
    transform: translateY(6px) rotate(-45deg);
  }
  .ham-menu {
    position: absolute;
    top: 42px;
    left: 0;
    margin: auto;
    min-width: 100%;
    overflow: hidden;	
    z-index: 100;	
  }
  .ham-menu ul {
    padding-top: 100px;
    -webkit-transform: translateX(-110%);
    transform: translateX(-110%);
    background-color: #005F9D;			
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;		
  }
  .ham-menu.on ul {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
  .ham-menu ul {
    font-size: 0;
  }
  .ham-menu ul li {
    display: inline-block;
  }
  .ham-menu ul li:first-child .ham-menu ul li a {
    padding-left: 30px;
  }
  .ham-menu ul li a {
    padding: 15px;
    display: block;
    background-color: transparent;
    color: #fff;
    text-transform: uppercase;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    font-size: 13px;
  }