Responsive Website Navigation for Genesis WordPress Themes - Primary and Secondary Navigation - https://amethystwebsitedesign.com/responsive-website-navigation-for-genesis-wordpress-themes/

drop-down-nav.js

jQuery( function($) {
        'use strict';

	// Insert mobile menu icon before the primary navigation ul
	$( '<div id="menu-primary-mobile">&#8801; Menu</div>' ).insertBefore( 'ul.menu-primary' );

	// Add .displaynone class to ul.menu-primary to hide ul.menu-primary for small screen sizes
	$( 'ul.menu-primary' ).addClass( 'displaynone' );

	// Toggle nav for mobile menu
	$('#menu-primary-mobile').click (function(){
		$('.menu-primary').slideToggle();
		$(this).toggleClass('active');
	});

	// Insert mobile menu icon before the secondary navigation ul
	$( '<div id="menu-secondary-mobile">&#8801; Menu</div>' ).insertBefore( 'ul.menu-secondary' );

	// Add .displaynone class to ul.menu-secondary to hide ul.menu-secondary for small screen sizes
	$( 'ul.menu-secondary' ).addClass( 'displaynone' );

	// Toggle nav for mobile menu
	$('#menu-secondary-mobile').click (function(){
		$('.menu-secondary').slideToggle();
		$(this).toggleClass('active');
	});

});

functions.php

<?php
// Note: Add only code below to your functions.php

add_action( 'wp_enqueue_scripts', 'amethyst_load_mobile_nav_script' );
function amethyst_load_mobile_nav_script() {

    //Add mobile button script to primary navigation menu
    wp_enqueue_script( 'nav_for_mobile', get_bloginfo( 'stylesheet_directory' ) . '/scripts/drop-down-nav.js', array('jquery'), '0.5' );
}

style.css

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

	/* Start Mobile Menu Navigation - Only on .nav-primary and .nav-secondary
	 --------------------------------------------------- */

	/* Hide .nav-primary and .nav-secondary*/
	.nav-primary .genesis-nav-menu.displaynone,
	.nav-secondary .genesis-nav-menu.displaynone  {
		display: none;
	}

	.nav-primary,
	.nav-secondary {
		text-align: center;
	}

	.nav-primary #menu-primary-mobile,
	.nav-secondary #menu-secondary-mobile {
		background-color: #333;
		color: #999;
		cursor: pointer;
		display: block;
		font-family: Lato, sans-serif;
		font-size: 18px;
		font-size: 1.8rem;
		height: auto;
		line-height: 18px;
		padding: 20px 16px;
		padding: 2rem 1.6rem;
		text-transform: uppercase;
	}

	.nav-primary #menu-primary-mobilee:hover,
	.nav-primary #menu-primary-mobile:focus,
	.nav-primary #menu-primary-mobile:active,
	.nav-secondary #menu-secondary-mobile:hover,
	.nav-secondary #menu-secondary-mobile:focus,
	.nav-secondary #menu-secondary-mobile:active{
		background-color: #333;
		color: #fff;
		display: block;
	}

	/* .nav-primary and .nav-secondary is mobile */
	.nav-primary .genesis-nav-menu .menu-item,
	.nav-primary .genesis-nav-menu a,
	.nav-primary .genesis-nav-menu .sub-menu,
	.nav-secondary .genesis-nav-menu .menu-item,
	.nav-secondary .genesis-nav-menu a,
	.nav-secondary .genesis-nav-menu .sub-menu{
		text-align: center;
		width: 100%;
	}

	.nav-primary .genesis-nav-menu .menu-item > .sub-menu,
	.nav-secondary .genesis-nav-menu .menu-item > .sub-menu{
		clear: both;
		margin: 0;
		opacity: 1;
		position: inherit;
		width: 100%;
	}

} 

@media only screen and (min-width: 769px) {

	/* This makes the nav menu normal again when the browser window expands */
	.nav-primary .genesis-nav-menu,
	.nav-secondary .genesis-nav-menu{ 
		display: block !important; 
		height: auto; 
	}

	/* Hide Mobile Menu Button */
	.nav-primary #menu-primary-mobile,
	.nav-secondary #menu-secondary-mobile {
		display: none;
		height: 0;
	}

}