Pure CSS Responsive Menus For Genesis

add-responsive-toggle.php

<?php //* Don't copy the php

//* Activate the use of Dashicons

add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

//* Add Extra div to nav for responsive menu

add_filter('wp_nav_menu','jan_responsive_nav', 10, 3);
function jan_responsive_nav( $nav, $args ) {
    if( $args->theme_location == 'primary')  {
        return  '<input type="checkbox" id="toggle" /><div><label for="toggle" class="toggle" data-open="Open Menu" data-close="Close Menu" onclick></label>' . $nav . '</div>';
	}
    return $nav;
}

genesis-responsive-nav-one.css

/* # Responsive Nav CSS
---------------------------------------------------------------------------------------------------- */

.nav-primary  #toggle, .toggle {
	z-index: 9999;
	display: none;
}


@media only screen and (max-width: 800px) {

	.nav-primary .menu {
		display: none;
		position: absolute;
		opacity: 1;
		width: 100%;
		right: 0;
		background-color: #222;
		z-index: 9999;
	}

	.nav-primary .menu li a.sub {
		behavior:url();
	}

	.nav-primary a {
		width:100%;
	}

	.nav-primary .menu, 
	.nav-primary .menu .sub-menu {
		margin:0;
		width:100%;
	}
	
	.nav-primary .menu .sub-menu {
		left: 0;
		display: none;
		opacity: 1;
	}
	

	.nav-primary .menu-item:hover {
		position: static;
	}

	.nav-primary .menu-item:hover > .sub-menu {
		position: relative;
		left: auto;
		display: block;
	}

	.nav-primary .menu li {
		position:relative;
		z-index:100;
		display: block;
	}
	

	.nav-primary .menu li a {
		display:block;
		padding-left:15px;
		width:100%;
		outline:0;
		background:#000;
		color:#fff;
		text-decoration:none;
		font-size:16px;
		line-height:25px;
	}
	
	.nav-primary .menu li.menu-item-has-children > a:after {
		float: right;
		content: "\f347";
		font-family: 'dashicons';
		font-size: 22px;
	}
	
	.nav-primary .menu-item-has-children li a:before {
		position:absolute;
		top:0;
		left:0;
		display:block;
		display:none;
		height:25px;
		cursor:pointer;
	}
	
	.nav-primary .menu li a:hover {
		background-color:#51C1F1;
		color: #fff;
	}
	
	.nav-primary .menu .sub-menu li a {
		border-bottom:1px solid #ccc;
		background:#eee;
		color:#000;
		font-size:16px;
		line-height:25px;
	}	
	
	.nav-primary .menu .sub-menu li a:hover {
		background:#ddd;
		color: #51C1F1;
	}
	
	.nav-primary .menu .sub-menu .sub-menu li a:hover {
		background:#fff;
		color: #333;
	}
	
	.nav-primary .menu .sub-menu .sub-menu > li a {
		background:#fff;
		color: #333;
	}
	
	.nav-primary .menu .sub-menu .sub-menu .sub-menu > li a {
		background:#51C1F1;
		color: #fff;
	}
	
	.nav-primary .menu a.sub:focus {
		outline:0;
		background:#099;
	}
	
	.nav-primary .menu a:focus ~ .sub-menu li {
		 margin-top:0;
	}
	
	.nav-primary .menu a:focus + after {
		display:block;
	}
	
	.nav-primary .menu a.sub:active {
		outline:0;
		background:#099;
	}
	
	.nav-primary .menu a:active ~ .sub-menu li {
		 margin-top:0;
	}
	
	.nav-primary .menu a:active + after {
		display:block;
	}
	
	.nav-primary .menu .sub-menu:hover li {
		margin-top:0;
	}
	

	.nav-primary .toggle {
		position: relative;
		display: block;
		cursor: pointer;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		user-select: none;
	}
 
	.nav-primary #toggle:checked + div .menu {
		display: block;
		opacity: 1;
	}
	
	.nav-primary .toggle:after {
		display: block;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		margin: 10px 0;
		padding: 20px 30px;
		width: 200px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		background: #51C1F1;
		color: #FFFFFF;
		content: attr(data-open);
		text-align: center;
		font-size: 20px;
		-webkit-transition: all 0.5s linear;
		-moz-transition: all 0.5s linear;
		-o-transition: all 0.5s linear;
		transition: all 0.5s linear;
	}
 
	.nav-primary .toggle:hover:after {
		background: #45ABD6;
	}
	
	.nav-primary #toggle:checked + div .toggle:after {
		content: attr(data-close);
	}
}
 
 @media only screen and (max-width: 600px) {
	 
 	.nav-primary,
 	.nav-primary .toggle:after {
	 	float: none;
	 }
	 
	 .nav-primary .toggle:after {
		 width: 100%;
		 text-align: center;
	}
}

damtn its what i am looking for and not found in hours!
great and thx. so i dont have to build pure css menu from scratch 👯‍♂️