Adding dynamic wordpress / genesis menu within

Firstly, let me explain what I'm trying to achieve here:

While redesigning the WordPress Genesis-sample theme by StudioPress I decided to use only the responsive-menu (mobile menu, the one with hamburger icon) for all display resolutions. I have already attached the menu to the right hook in the and styled the section to my liking, I've also set the mobile menu to display on all media queries.

What i would like to do next is add my custom menu (which I've already created) within the tag, just below the primary menu (nav-primary), so that it shows and hides on the button click along with it.

I've tried to use nav-extras to add my piece of code to the end of the tag with the following code coming from the genesis snippets library:

// Adding custom menu support

add_theme_support(
    'genesis-menus', array(
        'primary'   => __( 'Header Menu', 'genesis-sample' ),
        'secondary' => __( 'Footer Menu', 'genesis-sample' ),
        'custom' => __( 'Custom Menu', 'genesis-sample' ),
    )
);



//My custom menu function 

function add_custom_menu() {

    // Do nothing if menu not supported.

    if ( ! genesis_nav_menu_supported( 'custom' ) || ! has_nav_menu( 'custom' ) ) {
        return;
    }

    $class = 'menu genesis-nav-menu menu-custom';
    if ( genesis_superfish_enabled() ) {
        $class .= ' js-superfish';
    }

    genesis_nav_menu( array(
        'theme_location' => 'custom',
        'menu_class'     => $class,
    ) );

}

// Add typical attributes for navigation elements.

add_filter( 'genesis_attr_nav-custom', 'genesis_attributes_nav' );

add_filter( 'genesis_attr_nav-custom', 'my_skiplinks_attr_nav_custom' );

/**
 * Adds ID markup to custom navigation.
 *
 * @param array $attributes Existing attributes for custom navigation element.
 * @return array Amended attributes for custom navigation element.
 */

function my_skiplinks_attr_nav_custom( $attributes ) {

    $attributes['id'] = 'genesis-nav-custom';

    return $attributes;

}

add_filter( 'genesis_skip_links_output', 'my_skip_links_output' );

/**
 * Adds skip link for custom navigation.
 *
 * @param array $links Exiting skiplinks.
 * @return array Amended skiplinks.
 */

function my_skip_links_output( $links ) {

    if ( genesis_nav_menu_supported( 'custom' ) && has_nav_menu( 'custom' ) ) {
        $links['genesis-nav-custom'] = __( 'Skip to custom navigation', 'genesis' );
    }

    return $links;

}


//Adding custom menu to <nav> tag

    add_filter( 'wp_nav_menu_items', 'theme_menu_extras', 10, 2 );
    /**
     * Filter menu items, appending either a search form or today's date.
     *
     * @param string   $menu HTML string of list items.
     * @param stdClass $args Menu arguments.
     *
     * @return string Amended HTML string of list items.
     */
    function theme_menu_extras( $menu, $args ) {
        //* Change 'primary' to 'secondary' to add extras to the secondary navigation menu *//
        if ( 'primary' !== $args->theme_location )
        return $menu;

        $menu .= '<div id="sub-menu">'. add_custom_menu() .'</div>';

        return $menu;
    }

The result is that even the div that I added isn't being put in place. Can find my way around. Help will be much appreciated :), thank you in advance.

I've just solved it :

// Hide/display on mobile-menu button click

window.onclick = hideFunction;

function hideFunction() {
    let x = document.getElementById("genesis-mobile-nav-primary").getAttribute("aria-expanded");

    if (x == "true") {
    document.getElementById("genesis-nav-custom").style.display = "block";   
    } else {
    document.getElementById("genesis-nav-custom").style.display = "none";    
    };
}

// Create custom menu and hook into the header just under <nav> (the primary navigation) tag

// Register the custom menus.

function register_additional_menu() {
    register_nav_menu( 'custom' ,__( 'Header Submenu' ));
    }
    add_action( 'init', 'register_additional_menu' );

/**
 * Echoes the "Custom Navigation" menu.
 */
function custom_do_nav() {
    $class = 'custom';
    if ( genesis_superfish_enabled() ) {
        $class .= ' js-superfish';
    }

    genesis_nav_menu( array(
        'theme_location' => 'custom',
        'menu_class'     => $class,
        'menu_id'        => 'custom-menu',
    ) );

}


// Add typical attributes for navigation elements.
add_filter( 'genesis_attr_nav-custom', 'genesis_attributes_nav' );

add_filter( 'genesis_attr_nav-custom', 'skiplinks_attr_nav_custom' );
/**
 * Adds ID markup to custom navigation.
 *
 * @param array $attributes Existing attributes for custom navigation element.
 * @return array Amended attributes for custom navigation element.
 */
function skiplinks_attr_nav_custom( $attributes ) {

    $attributes['id'] = 'genesis-nav-custom';

    return $attributes;

}
// Custom menu action hook
add_action( 'genesis_header', 'custom_do_nav', 12 );

That's pretty much it 🙂