Before Header + Site Header in Business Pro

This members-only tutorial provides the steps to register a Before Header (or popularly, knows as Utility Bar) in Business Pro, combine it with the site header, make the combined div transparent initially and with a dark background upon scrolling down.

Initial state:

After scrolling down:

Tested in Business Pro 1.1.0.

Step 1

Let's register a Before Header widget area.

In includes/widgets.php, above

// Register Front Page 1 widget area.

add

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

Step 2

Let's hook before-header widget area above site header (along with the opening tag for div.my-header) and add the closing tag for div.my-header.

Add the following at the end of includes/helpers.php: