Mobile menu won't hide – Twenty Twelve

Hello
I have a site where I’m experimenting with a mobile menu. I have created a new template and put all needed styles, html and javascript there, because the rest of the site is live.

As you can see on the link, the menu works fine until the mobile menu appearing, showing the content instead of hiding it.

What am I doing wrong here?

This is the web page.

HTML/PHP

<nav id="site-navigation" class="secondary-navigation" role="navigation">
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
<?php wp_nav_menu( array( 'theme_location' => 'secondary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>

CSS:

.secondary-navigation {
	margin:0 auto;
	padding:0 0 20px 0;
	text-align: center;
	position:absolute;
	z-index:100;
	top:0;
	left:0;
	height:auto;
	width:100%;
	background:#000;}

.secondary-navigation ul{
	max-width:100%;
	height:auto;
	margin:0 auto;
	width:100%;
	}
.secondary-navigation li {
	font-size: 1em;
	margin-top:5px;
	padding:0 8px 0 8px;
	border-left:1px solid #555;
}
.secondary-navigation li:first-child{
	border-left:none;}

.secondary-navigation a {
	color: #ffffff;
	font-family: 'octin_spraypaint_freeregular';
}
.secondary-navigation a:hover {
	color: #000;
}
	.secondary-navigation{}
	.secondary-navigation ul {
		margin-top: 0;
		text-indent: 0;
		height:30px;
	}
	.secondary-navigation li a,
	.secondary-navigation li {
		display: inline-block;
		text-decoration: none;
	}
	.secondary-navigation li a {
		border-bottom: 0;
		color: #fff;
		font-size:2em;
		text-transform: uppercase;
		white-space: nowrap;
	}
	.secondary-navigation li a:hover {
		color: #F00;
	}
	.secondary-navigation li {
		height:1.9em;
	}
	.secondary-navigation li ul {
		display: none;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 100%;
		z-index: 1;
	}
	.secondary-navigation li ul ul {
		top: 0;
		left: 100%;
	}
	.secondary-navigation .current-menu-item > a,
	.secondary-navigation .current-menu-ancestor > a,
	.secondary-navigation .current_page_item > a,
	.secondary-navigation .current_page_ancestor > a {
		color: #F00;
		font-weight: bold;
	}
	.menu-toggle{display:none;}
@media only screen and (max-width:1359px){
	.secondary-navigation{
	max-width:550px;
	right:0;
	left:0;
	}
}
@media only screen and (max-width:900px){
	.secondary-navigation{margin-top:40px;}
}

@media only screen and (max-width:650px){
	.menu-toggle {
		display: inline-block;
		width:100px;
		height:20px;
		font-size:1.2em;
		margin-top:40px;
	}
	.secondary-navigation{
		margin-top:0;
		text-align:center;
		}

	.secondary-navigation ul.nav-menu,
	.secondary-navigation div.nav-menu > ul {
		display: inline-block !important;
		text-align: left;
		width: 100%;
		margin-top:10px;
	}
	.secondary-navigation ul {
		display:none;
		margin: 0;
		text-indent: 0;

	}
	.main-navigation li a,
	.secondary-navigation li {
		display: inline-block;
		text-decoration: none;
		border:none;
		text-align:center;
		padding:0 0 5px 0;
		margin:0;
		width:100%;
		background:#000;

	}
	.secondary-navigation li a {
		color: #777;
		text-transform: uppercase;
		white-space: nowrap;
		font-family:Arial, Helvetica, sans-serif;
		font-size:1.2em;
		line-height:1.8em;
		border-top:1px solid #333;
		border-bottom:1px solid #333;
		border-left:none;
		border-right:none;

	}
	.secondary-navigation li a:hover {
		color: #fff;
	}
	.secondary-navigation li {
		position: relative;
	}
	.secondary-navigation li ul {
		display: none;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 100%;
		z-index: 1;
	}
	.secondary-navigation li ul ul {
		top: 0;
		left: 100%;
	}
	.secondary-navigation ul li:hover > ul {
		border-left: 0;
		display: block;
	}
	.secondary-navigation li ul li a {
		background: #000;
		border-bottom: 1px solid #ededed;
		display: block;
		font-size: 11px;
		font-size: 0.785714286rem;
		line-height: 2.181818182;
		padding: 8px 10px;
		padding: 0.571428571rem 0.714285714rem;
		width: 180px;
		width: 12.85714286rem;
		white-space: normal;
	}
	.secondary-navigation li ul li a:hover {
		color: #f00;
	}
	.secondary-navigation .current-menu-item > a,
	.secondary-navigation .current-menu-ancestor > a,
	.secondary-navigation .current_page_item > a,
	.secondary-navigation .current_page_ancestor > a {
		color: #fff;
		font-weight: bold;
	}

	}

JavaScript: (as it comes with Twenty Twelve)

( function() {
	var nav = document.getElementById( 'site-navigation' ), button, menu;
	if ( ! nav )
		return;
	button = nav.getElementsByTagName( 'h3' )[0];
	menu   = nav.getElementsByTagName( 'ul' )[0];
	if ( ! button )
		return;

	// Hide button if menu is missing or empty.
	if ( ! menu || ! menu.childNodes.length ) {
		button.style.display = 'none';
		return;
	}

	button.onclick = function() {
		if ( -1 == menu.className.indexOf( 'nav-menu' ) )
			menu.className = 'nav-menu';

		if ( -1 != button.className.indexOf( 'toggled-on' ) ) {
			button.className = button.className.replace( ' toggled-on', '' );
			menu.className = menu.className.replace( ' toggled-on', '' );
		} else {
			button.className += ' toggled-on';
			menu.className += ' toggled-on';
		}
	};
} )();