How to set up an alternate logo in Showcase Pro’s front page

In my tutorial requests Trello board, a user asked:

... Please could you write a tutorial for using an alternative logo in the full size header on the home page in the updated Showcase Pro. I need to use a reversed logo over the hero image. Thank you. Claire

When title text is used in the site header of Showcase Pro, all the text links in the header appears in white on page load (non-scrolled state) and turns dark gray when scrolled on the front page.

However, when a header image (for a logo) is set, the header background becomes white and all the links in the non-scrolled state appear similar to those in the scrolled state. The only change is the shrinking of the header.

Non-scrolled state:

Scrolled state:

In this tutorial, I share the steps for displaying an inverted logo in the non-scrolled state on Showcase Pro's homepage with text links appearing in white.

Sample screenshots:

Non-scrolled state:

Scrolled state:

Tested in Showcase Pro v2.0.0.

Step 1

In functions.php, locate

// Add support for custom header

section and change the width and height to those of your logo image.

Ex.: change

// Add support for custom header
add_theme_support( 'custom-header', array(
    'width'           => 400,
    'height'          => 150,
    'header-selector' => '.site-title a',
    'header-text'     => false,
    'flex-height'     => true,
) );

to

// Add support for custom header
add_theme_support( 'custom-header', array(
    'width'           => 400,
    'height'          => 106,
    'header-selector' => '.site-title a',
    'header-text'     => false,
    'flex-height'     => true,
) );

Step 2

Go to Appearance > Customize > Header Image. Upload/select your logo image. This should be the one that should appear in scrolled state on the homepage and in both the states on inner pages.

Sample logo image: