Burger-menu в закрытом состоянии накрывает контент.

[anemu]

Есть такой Burger-menu(весь код ниже прилагаю). Работает нормально, но проблема в том, что закрытоe состояние контейнера .hum-menu находится выше основного контента.

Была попытка с помощью CSS свойством z-index решить вопрос, но здесь могу задать только для обоих состояний одновременно (закрытом и открытом меню). Понимаю, что с помощью JS возможно задать для открытого состояния Z-index самый высокий, а для закрытого - низкий, чтобы контент был выше. Но как это сделать? Помогите, пожалуйста, решить проблему.

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();
});

.ham-menu {
		position: absolute;
		top: 42px;
		left: 0;
		margin: auto;
		min-width: 100%;
		z-index: 100;				
	}

<div class="menu">					
   <button id="hamburger-menu" data-toggle="ham-navigation" 
     class="hamburger-menu-button">
	 <span class="hamburger-menu-button-open">Menu</span>
   </button> 
	<nav id="ham-navigation" class="ham-menu">
		<div class="menu-cont">
			...menu-items...
		</div>
	</nav>					
</div>