Add a mobile responsive menu to a Genesis Child Theme - Essential Styles

style.css

/*
	Mobile Menu for Genesis 1.x
	Version: 1.0.0
	 
	License: GPL-2.0+
	License URI: http://www.opensource.org/licenses/gpl-license.php
*/

/* Primary Navigation
--------------------------------------------- */
#nav {
	clear: both;
}

/* Navigation Toggle
------------------------------------------------------------ */
.menu-toggle {
	display: none;
	visibility: hidden;
}

/* Navigation Toggle - Ensure Menu Displays When Scaled Up
------------------------------------------------------------ */
@media only screen and (min-width: 681px) {
	#nav {
		display: block !important;
	}
}

/* Navigation Toggle - Mobile (Change max-width as necessary)
------------------------------------------------------------ */
@media only screen and (max-width: 680px) {
	.menu-toggle {
		background: rgba(0, 0, 0, 0.12);
		color: #fff;
		display: block;
		float:right;
		font-size: 16px;
		line-height: 1;
		font-weight: 700;
		overflow: hidden;
		margin: 10px 0 0;
		text-align: center;
		text-transform: uppercase;
		visibility: visible;
		border-radius: 3px;
	}
	
	.menu-toggle a {
		color: #fff;
		display: block;
		padding: 15px;
	}

	.menu-toggle a:hover,
	.menu-toggle a:active {
		text-decoration: none;
	}

	#nav {
		display: none;
	}
}