Here's anotherfave question I get a lot.
How do you change the site header logo to another logo for a specific page or post?
Let's see how you could do this in theAvada,Divi,Astra, andTwenty Twenty. All four methods are CSS-only solutions. I've included three snippets using apage for the example and one snippet using apost for the example. See the comments in the code for how to apply the CSS forposts orpages as needed.
How do I get the page/post ID?
Scope outthis pen, for aJavaScript approach.
If you want to follow along, here's the logo I'll be using to override the default site logo.
Onecaveat: for all custom CSS added to any theme, you may need the!important directive. You can always use yourFirefox orChrome dev tools inspector to verify what to override.
For example, if your logo doesn't show up at first, you might have to use!important in the code I provide below especially for the display, width, and height attributes.
Ready? Let's rock!
Different Logo for Different Pages using Avada#
This CSS will change the logo only for a page on an Avada site that's ID is 18.
/* Avada *//** * Hide the default logo. * * For posts use .postid-2466 format. */.page-id-18.fusion-logo-linkimg{display:none;}/** * Drop in a different logo. * * The site link is respected. */.page-id-18.fusion-logo-link{background-image:url(https://balistreetphotographer.files.wordpress.com/2019/02/balistreetphotographer-logo-2-slashes-65.png);background-repeat:no-repeat;background-size:100%;display:block;position:relative;height:65px;width:65px;}The Result
Different Logo for Different Posts using Divi#
For Divi, let's do something exciting and change the logo for a specificpost not a page. This CSS will change the logo only for a post on a Divi site that's ID is 266.
/* Divi *//** * Hide the default logo. * * For pages, use format .page-id-9 */.postid-266#logo{display:none!important;}/** * Insert a different logo as a background image. * * The site link is respected. */.postid-266.logo_container{background-image:url(https://balistreetphotographer.files.wordpress.com/2019/02/balistreetphotographer-logo-2-slashes-65.png);background-repeat:no-repeat;width:100px!important;}The Result
Different Logo for Different Pages using Astra#
This CSS will change the logo only for a page on an Astra site that's ID is 4.
/* Astra *//** * Hide the default logo. * * For posts, use format .postid-49272 */.page-id-4.custom-logo{display:none;}/** * Let's use a different logo. * * The site link is respected. */.page-id-4a.custom-logo-link.transparent-custom-logo{background-image:url(https://balistreetphotographer.files.wordpress.com/2019/02/balistreetphotographer-logo-2-slashes-65.png);background-repeat:no-repeat;background-size:100%;display:block;position:relative;height:65px;width:65px;}The Result
Different Logo for Different Pages using Twenty Twenty#
This CSS will change the logo only for a page on an Twenty Twenty site that's ID is 14.
/* Twenty Twenty *//** * Hide the default logo. * * For posts use .postid-1 format. */.page-id-14.custom-logo-linkimg{display:none;}/** * Drop in a different logo. * * The site link is respected. */.page-id-14.custom-logo-link{background-image:url(https://balistreetphotographer.files.wordpress.com/2019/02/balistreetphotographer-logo-2-slashes-65.png);background-repeat:no-repeat;background-size:100%;display:block;position:relative;height:65px;width:65px;}The Result
What About Retina?#
With Retina, we need to check the device usingCSS media queries. Then, we can use a higher res (2x) logo. But, we still need to contain the logo so it fits in the header. We do that by fixing the background size dimensions.
Using the Avada theme as an example, you would add this extra CSS. Note the differences that I flag in the comments.
/* Media query for Retina on Avada */@mediascreenand(min--moz-device-pixel-ratio:2),screenand(-o-min-device-pixel-ratio:2/1),screenand(-webkit-min-device-pixel-ratio:2),screenand(min-device-pixel-ratio:2){.page-id-18.fusion-logo-link{background-image:url(https://balistreetphotographer.files.wordpress.com/2019/02/balistreetphotographer-logo-2-black-250.png);/* High res logo */background-repeat:no-repeat;background-size:65px65px;/* Instead of 100%. New for Retina. */display:block;/* Add !important if needed. */position:relative;height:65px;/* Add !important if needed. */width:65px;/* Add !important if needed. */}}The Result
How Do I Get the Page or Post ID?#
Go to the page that you want to change the logo. View source. Search on<body. Look for the page or post ID class.
How Do I Add Custom CSS?
Adding Custom CSS to Your WordPress Site
As always, shout if you've got a question.
See ya next time. Share & enjoy!
Top comments(0)
For further actions, you may consider blocking this person and/orreporting abuse
