Genesis mobile menu styles for Genesis 2.0 and above.

style-2.css

/*
	Mobile Menu for Genesis 2.0
	Version: 2.0.0

	License: GPL-2.0+
	License URI: http://www.opensource.org/licenses/gpl-license.php
*/

/* Primary Navigation
--------------------------------------------- */
.nav-primary {
	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-primary {
		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;
		font-size: 1.6rem;
		line-height: 1;
		font-weight: 700;
		overflow: hidden;
		margin: 10px 0 0;
		margin: 1rem 0 0;
		text-align: center;
		text-transform: uppercase;
		visibility: visible;
		border-radius: 3px;
	}

	.menu-toggle a {
		color: #fff;
		display: block;
		padding: 15px;
		padding: 1.5rem;
	}

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

	.nav-primary .genesis-nav-menu .menu-item {
	    display: block;
	    margin: 0;
	    padding: 0;
	    text-align: center;
	}
}