1. Edit child theme’s functions.php.
a) Change
// Rename primary and secondary navigation menus. add_theme_support( 'genesis-menus', array( 'primary' => __( 'After Header Menu', 'genesis-sample' ), 'secondary' => __( 'Footer Menu', 'genesis-sample' ) ) );
to
// Rename primary and secondary navigation menus. add_theme_support( 'genesis-menus', array( 'primary' => __( 'Primary Navigation Menu', 'genesis-sample' ), 'secondary' => __( 'Footer Menu', 'genesis-sample' ) ) );
b) Add
// Remove the header right widget area. unregister_sidebar( 'header-right' ); // Reposition the primary navigation menu. remove_action( 'genesis_after_header', 'genesis_do_nav' ); add_action( 'genesis_header', 'genesis_do_nav' ); // Remove Primary Menu's wrap. add_theme_support( 'genesis-structural-wraps', array( 'header', // 'menu-primary', 'menu-secondary', 'footer-widgets', 'footer' ) );
2. If you haven’t already, create and assign a WordPress menu to Primary Navigation Menu theme location at Appearance > Menus.
3. Add the following at the end in Genesis Sample’s style.css:
.nav-primary { border-top: none; float: right; } @media only screen and (max-width: 1023px) { .site-header .wrap { padding-left: 0; padding-right: 0; } .title-area { width: auto; } .header-image .title-area { float: left; width: 100%; } .menu-toggle { width: auto; border-top: none; float: right; margin-top: 16px; } .menu-toggle, .menu-toggle:focus, .menu-toggle:hover { border-top: none; } .nav-primary { float: none; clear: both; } } @media only screen and (max-width: 860px) { .site-header .wrap { padding-left: 5%; padding-right: 5%; } } @media only screen and (max-width: 500px) { .title-area, .menu-toggle { float: none; width: 100%; } .header-image .title-area { float: none; overflow: hidden; } }
Source: https://sridharkatakam.com/add-inline-mobile-responsive-menu-genesis-sample/
To change your Genesis theme mobile menu as shown above, you need to do 3 things...
If you would like to remove the word Menu next to the hamburger menu icon make these changes:
1) In functions.php change
'mainMenu' => __( 'Menu', 'my-theme-text-domain' ),
to
'mainMenu' => __( '', 'my-theme-text-domain' ),
2) In style.css, remove right padding for
.menu-toggle:before, .menu-toggle.activated:before
Source: https://sridharkatakam.com/add-inline-mobile-responsive-menu-genesis-sample/