Changing logo on scroll

  • Author
    Posts
  • #163716

    Hi Taras!

    Thanks again for your wonderful work on this theme.

    I’ve searched for similar answers on this forum, but none are working in my website’s case.

    I’m looking to change the logo (using CSS) when the scroll-down header loads.
    My primary logo has a white element that I’m looking to change to black on the scroll-down header.

    Any ideas?

    Many thanks!

    The blog I need help with is app-stock.com.

    #163718

    tarasdashkevych
    Theme Author

    Hello David,

    We can use this solution: https://premium-themes.forums.wordpress.com/topic/alternate-logo/

    I am happy to help you with an alternative logo setup. Please upload your dark logo as a default logo of your site. We are going to use your white logo as an alternative logo.

    Let me know when it’s done, so I can provide a custom CSS specially made for your site. Please also post a link to your alternative logo (the white one). I’ll need it for the custom CSS.

    Thank you,
    Taras

    #163721

    Hi Taras,

    I’d like to do the opposite, use the white one as the default logo and the black one as the alternate logo (so it displays on the scroll down header).

    I’ve uploaded the white logo as the primary logo, as well as added the black (alternate) logo to my WordPress media.

    The links are as follows:
    white (primary): https://app-stock.com/wp-content/uploads/2021/07/cropped-AppStock-Logo-White.png

    black (alternate): https://app-stock.com/wp-content/uploads/2021/07/AppStock-Logo-Black.png

    Thank you!

    #163722

    tarasdashkevych
    Theme Author

    Hello David,
    Thank you for posting links to the logos.

    “I’d like to do the opposite, use the white one as the default logo and the black one as the alternate logo (so it displays on the scroll down header).”
    – For that reason, we need to upload your dark version of logo as a primary logo using a WordPress option in the Customizer.

    Although, a dark version of the logo is uploaded as a primary logo, it will be shown only when the site header has a white background (during a scroll, and in mobile views).

    Once a dark version of the logo is uploaded to your site, please add the following custom CSS to your site:

    
    @media (min-width: 768px) {
        .site-header:not(.scroll-header) .site-branding img {
            display: none;
        }
    
        .site-header:not(.scroll-header) .site-branding .custom-logo-link::before {
            background-image: url(https://app-stock.com/wp-content/uploads/2021/07/cropped-AppStock-Logo-White.png);
            background-size: 175px 70px;
            background-repeat: no-repeat;
            display: block;
            width: 175px;
            height: 70px;
            content: "";
        }
    }
    

    Please let me know if you have additional questions.

    Kind regards,
    Taras

    #163723

    Works perfectly, thank you Taras!

    #163725

    tarasdashkevych
    Theme Author

    You are always welcome, David!

    Kind regards,
    Taras

The topic ‘Changing logo on scroll’ is closed to new replies.