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. ClaireWhen 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 1In functions.php, locate
// Add support for custom headersection 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, ) );
// 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 2Go 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.