Different Logo on specific Page with CSS

  • Resolved alphar

    (@alphar)


    3 years, 7 months ago

    Hi all,

    I´m stuck on some CSS Code. I want to change the Logo on a specific Page.

    The Code I wanted to use is:

    .page-id-5 .custom-logo {
    display: none;
}

.page-id-5 .custom-logo {
    background-image: url(https://scheelnet-webdesign.de/wp-content/uploads/2022/07/Logo-1.png) !important;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    background-size: contain;
}

    In this case, no Logo appears. When deleting the first paragraph, both Logos appear simultaneously.

    What needs to be changed?

    Thanks in advance!
    Chris

    • This topic was modified 3 years, 7 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • igorredaelli

    (@igorredaelli)

    3 years, 7 months ago

    Hi Chris, if you want to customize your logo on a specific page the best way is to do that with functions.php, you should check your theme if any hook/action is available for that.
    You can also do it via CSS, but is a workaround. In summary, you have to hide the visibility (not with display:none) of the main logo in your specific page (filtered via class unique ID) and then you can set the logo via CSS background-image but with another CSS class, in your specific case .custom-logo-link is good for that.

    .page-id-5 .custom-logo {
    visibility: hidden;
}

.page-id-5 .custom-logo-link {
    background-image: url(https://scheelnet-webdesign.de/wp-content/uploads/2022/07/Logo-1.png) !important;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    background-size: contain;
}

    Let me know if you have any other query.
    Thanks and regards.

    Thread Starter alphar

    (@alphar)

    3 years, 7 months ago

    Yes that works.

    Thank you for your help, appreciate that!

    Greetings
    Chris

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Different Logo on specific Page with CSS’ is closed to new replies.