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.
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.
Tested in Showcase Pro v2.0.0.
In functions.php, locate
// Add support for custom header
section and change the width and height to those of your logo image.
// 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, ) );
// 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, ) );
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:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.