Mobile menu for Genesis

nav_menu.css

@media only screen and (max-width: 664px) {
	
	.mobile_menu {
		display: block;
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		padding: 5px 20px;
		padding: 0.5rem 2rem;
		cursor: pointer;
		text-align: left;
	}
	
	.mobile_menu span {
		font-family: 'Arial Unicode MS', 'Apple Symbols', 'GNU Unifont', Unifont;
		font-size: 1.5em;
	}
	
	.mobile_menu:hover,
	.mobile_menu:active {
		background-color: #eee;
		color: #999;
	}
	
	.genesis-nav-menu.mobile {
		display: none;
		position: absolute;
		left: 0;
		z-index: 999;
		width: 100%;
		box-sizing: border-box;
		background-color: #eee;
		border-bottom: 2px solid #ccc;
	}
	
	.genesis-nav-menu.mobile li {
		display: block;
		position: static;
		width: 100%;
		float: none;
		clear: both;
	}
	
	.genesis-nav-menu.mobile .facebook,
	.genesis-nav-menu.mobile .twitter,
	.genesis-nav-menu.mobile .feed,
	.genesis-nav-menu.mobile .youtube {
		float: left;
		clear: none;
		width: auto;
	}
	
	.genesis-nav-menu.mobile li a {
		display: block;
		float: none;
		width: auto;
		padding: 10px 20px;
		padding: 1rem 2rem;
	}
	
	.genesis-nav-menu.mobile ul,
	.genesis-nav-menu.mobile ul ul,
	.genesis-nav-menu.mobile .sub-menu,
	.genesis-nav-menu.mobile .sub-menu .sub-menu {
		display: block;
		visibility: visible;
		opacity: 1;
		position: static;
		float: none;
		clear: both;
		width: 95%;
		margin: 0;
		margin-left: 5%;
		padding-left: 10px;
		padding-left: 1rem;
		z-index: 9999;
		background: transparent;
		border-left: 2px solid #acd467;
	}
	
	.genesis-nav-menu.mobile .sub-menu a {
		display: block;
		width: 100%;
		border-width: 0 0 1px;
		background: transparent;
	}
}

nav_menu.js

jQuery(function() {
	jQuery('.genesis-nav-menu').addClass("mobile").before('<a class="mobile_menu"><span>&#x2630;</span> Menu</a>');
 
	/* toggle nav */
	jQuery(".mobile_menu").click(function(){
		jQuery(this).next('.genesis-nav-menu').slideToggle();
	});
});