responsive navigation

responsive-navigation.css

/* Primary Navigation Menu Icon properties */

#primary-menu-icon {
	cursor: pointer;
	display: block;
	padding: 24px 24px;
	padding: 2.4rem 2.4rem;
	text-align: center;
}

#primary-menu-icon::before {
	color: #523528;
	content: 'MENU \2630';
	font-weight: bold;
	letter-spacing: 1px;
}

#primary-menu-icon:hover::before {
	color: #523528;
	content: 'MENU \2637';
}

#primary-menu-icon:active::before {
	color: #fff;
	content: 'MENU \2637';
}

#menu-primary-navigation li {
	display: block;
	text-align: center;
}
#menu-primary-navigation li a {
	border-top: 1px solid #724f41;
	padding: 10px;
	padding: 1rem;
}
#menu-primary-navigation li a:hover,
#menu-primary-navigation li a:active {
	background: #523528;
	border-radius: 0;
	color: #fff;
}

/* Hide Primary Navigation Menu until it's toggled via script */

#menu-primary-navigation {
	display: none;
}

responsive-navigation.js

jQuery(document).ready(function($) {

  $("#menu-primary-navigation").before('<div id="primary-menu-icon"></div>');
	$("#primary-menu-icon").click(function() {
		$("#menu-primary-navigation").slideToggle();
	});
	$(window).resize(function(){
		if(window.innerWidth > 900) {
			$("#menu-primary-navigation").removeAttr("style");
		}
	});

});