After Header Widget area in Corporate Pro

In my Facebook group a user asked:

I've got a very busy site and I need to have navigation both in the 'before header' section and "after header" of Corporate Pro. There's a widget for the before header that works, but I don't know how to make it adapt for mobile. Help, please.

This members-only tutorial provides the steps to register an after-header widget area in Corporate Pro, add it below the site header's wrap and move it inside the off-canvas side menu on smaller widths.

Tested in Corporate Pro 1.1.1.

Step 1

Edit corporate-pro/includes/widgets.php.

a) Below

// Register Before Header widget area.
genesis_register_sidebar( array(
	'id'          => 'before-header',
	'name'        => __( 'Before Header', 'corporate-pro' ),
	'description' => __( 'Before Header widget area.', 'corporate-pro' ),
) );

add

genesis_register_sidebar( array(
	'id'          => 'after-header',
	'name'        => __( 'After Header', 'corporate-pro' ),
	'description' => __( 'After Header widget area.', 'corporate-pro' ),
) );

b) Below

add_action( 'genesis_before_header_wrap', 'corporate_before_header' );
/**
 * Display Before Header widget area.
 *
 * This widget area is hooked to the before header wrap, inside of the
 * site-header element and outside of the site-header wrap creating
 * a full width section across the top of the screen while still
 * keeping semantically valid inside of the site-header scope.
 *
 * @since  1.0.0
 *
 * @return void
 */
function corporate_before_header() {
	genesis_widget_area( 'before-header', array(
		'before' => '<div class="before-header widget-area"><div class="wrap">',
		'after'  => '</div></div>',
	) );
}

add