Animation CSS for the Off Canvas Menu. http://www.calvinkoepke.com/add-a-mobile-friendly-off-canvas-menu-in-genesis

style.css

/*
	Title: How to Add a Mobile-Friendly, Off Canvas Menu in Genesis
	Author: Calvin Koepke (@cjkoepke)
	Link: http://www.calvinkoepke.com/add-a-mobile-friendly-off-canvas-menu-in-genesis
*/

/* Animation Settings and Classes
--------------------------------------------- */

.off-canvas-active,
.off-canvas-active .site-container{ 
	overflow: hidden;
}

.nav-primary,
.site-container {
	-webkit-transition: all .2ss ease-in-out;
	-moz-transition: all .2ss ease-in-out;
	-ms-transition: all .2ss ease-in-out;
	-o-transition: all .2ss ease-in-out;
	transition: all .2ss ease-in-out;
}

.nav-primary {
	-webkit-transform: translateX(260px);
	-moz-transform: translateX(260px);
	-ms-transform: translateX(260px);
	-o-transform: translateX(260px);
	transform: translateX(260px);
}

.off-canvas-active .nav-primary,
.site-container {
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
	transform: translateX(0);
}

.off-canvas-active .site-container {
	-webkit-transform: translateX(-260px);
	-moz-transform: translateX(-260px);
	-ms-transform: translateX(-260px);
	-o-transform: translateX(-260px);
	transform: translateX(-260px);
}

/* Site Overlay
--------------------------------------------- */
.site-overlay {
	display: none;
}

.off-canvas-active .site-overlay {
	display: block;
	position: fixed;
	top: 0;
	right: 260px;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9998;
}