In the members-only forum, a user asked:
I am working on a site using Business Pro. The have a logo that is grey that they want to use on the transparent header.
It doesn’t look good on the scroll down header but they really like the grey of the scroll down header. Is there a way to swap the logo with a white one when they scroll down so they have the best of both?
In the scrolled position, the main logo will be hidden and the secondary logo shown.
Prepare both the versions of your logo.
Primary - appears initially on page load
Secondary - appears when scrolled down
In functions.php, locate
// Enable logo option in Customizer > Site Identity. add_theme_support( 'custom-logo', array( 'height' => 100, 'width' => 300, 'flex-height' => true, 'flex-width' => true, 'header-text' => array( '.site-title', '.site-description' ), ) );
and set your logos' height and width values in the above.
In includes/customize.php, below
// Add logo size control. $wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'business_logo_size', array( 'label' => __( 'Logo Size', 'business-pro-theme' ), 'description' => __( 'Set the logo size in pixels. Default is 100.', 'business-pro-theme' ), 'settings' => 'business_logo_size', 'section' => 'title_tagline', 'type' => 'number', 'priority' => 8, ) ) );
To view the full content, please sign up for the membership.
Already a member? Log in below or here.