Alternate Logo

  • Author
    Posts
  • #159905

    ryandicko
    Member
    Original poster

    Hi Taras, hope you are well!

    I am trying to figure out how to have a white version of my logo before scrolling, changing to the existing colour version when scrolling. I know this topic has already been covered in the following thread but I couldn’t get the dimensions correct:
    https://premium-themes.forums.wordpress.com/topic/multiple-logo-coding-clarification/#post-155027

    Could you please advise the correct CSS to make the logos fit correctly?

    The white logo I would like to insert is here:
    https://aqua-safety.com/wp-content/uploads/2020/11/Aqua-Safety-Showers_Logo-WHT-SMALL.png

    Thanks so much for your help,
    Ryan

    The blog I need help with is: aqua-safety.com

    #159914

    tarasdashkevych
    Theme Author

    Hello Ryan,
    “Could you please advise the correct CSS to make the logos fit correctly?”
    – Sure. I will be happy to help! Please try this custom CSS:

    
    @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://aqua-safety.com/wp-content/uploads/2020/11/Aqua-Safety-Showers_Logo-WHT-SMALL.png);
            background-size: 114px 70px;
            background-repeat: no-repeat;
            display: block;
            width: 114px;
            height: 70px;
            content: "";
        }
    }
    

    Let me know if you have any additional questions.

    Kind regards,
    Taras

    #159932

    ryandicko
    Member
    Original poster

    Perfect, thanks so much Taras!

    #159945

    tarasdashkevych
    Theme Author

    You are very welcome, Ryan!

The topic ‘Alternate Logo’ is closed to new replies.