Hey there Divi people! This is John from Divi Ready Themes. In this tutorial, I’m going to show you how I came up with a solution to the issue of needing 2 different logos on 2 different pages.
When I created the Campaignz Political Divi Layout, I wanted the demo to show both the Democratic and Republican color schemes. The home page lands on the Democratic Divi layout theme, with the Democratic Logo. From there you can go to the Republican theme page to view that layout. The problem was, well not really a problem per se, more like a design “I want it” – the problem was when you were taken to the Republican page – the logo remained Democratic.
So I did a little research and found a tiny little piece of code that could do the job I wanted it to do. You are going to need 3 things:
- 2 logos – make them the same size.
- The PageID# of the page you want the second logo to appear on.
- CSS Code (below)
/* Logo Change Page */
.page-id-PAGEID# img#logo {
content: url(“http://yourwebsite.com/logoimage.png”);
}
Okay – so lets start with the 2 logos – These are the logos I created for the Campaignz Divi Layout. I did them in Photoshop, with a transparent background – saved as PNG files. You can use whatever you want, just make sure it is seamless with the rest of the header.
The next thing we need is our PageID# of the page where you want the second logo to appear. Navigate to your Pages listing. Hover your mouse pointer over the page name and at the very bottom of the screen, you will see the PageID# displayed. For use in this tutorial, the PageID# is 155.
Upload your second logo image to your Media Library. Once uploaded, click on the image thumbnail. You will be brought to the Attachment Details Page. Here you will find the image URL that you are going to need for your CSS.
Okay, now that we have gathered everything we need, let’s go to our Custom CSS section and put our code in, replacing the information with the specs we gathered. My code will look like the CSS below:
/* Logo Change Page */
.page-id-155 img#logo {
content: url(“http://campaignz.divireadythemes.com/wp-content/uploads/2018/06/political-REP.png”);
}
Let’s head over to our Divi Theme Options, scroll to the bottom of the page and insert your CSS in the Custom CSS section. Make sure that your PageID and Image URL are in place.
Now all we have to do is load the site up, head to the page where we wanted the second logo and low and behold – there it is:
I hope you have found this tutorial helpful. Share it with your friends. Make sure and check back with me for future Divi tips and tutorials. And don’t forget to visit my shop page for some of the best Divi Child Themes and Divi Layouts.
This is a great tutorial but I cannot get it to work for me for some reason. I get a broken image symbol and this would be a great feature for me. Any advice?
Steve – if you are getting a broken image symbol then the URL to your image is incorrect. Try putting the image URL into a browser window and see if it’s still broken. Make sure there are ” ” around the image URL.
Here is the code again:
.page-id-PAGEID# img#logo {
content: url(“”);
}
Let me know what happens.
I see what the problem is and have run into it before. The Firefox browser does not recognize the css rule to change the logo whereas Chrome does. It behaves the same way on your Candidate demo and does not switch logos on Firefox.
Good to know – Thanks. I guess we can’t make all the browsers happy.
Did you found a solution so that it also displays on Firefox? Thank you in advance
Hi,
I tried with this code, but the image is broken. The image URL into a browser is fine, so not sure what is the problem.Also, there are ” ” around the image URL….
Nelly:
I’m going to quote Steve from a previous comment: “I see what the problem is and have run into it before. The Firefox browser does not recognize the css rule to change the logo whereas Chrome does. It behaves the same way on your Candidate demo and does not switch logos on Firefox.”
Are you using FireFox?
My original page is still up with effect working. Go here: https://divireadythemes.com/campaignz/ and do an inspect – maybe you have something different in yours(?)
Hey all, if someone still getting issues with firefox i just tried the php method which worked great , putting that below
step 1 : assign body class to the page you want specific logo on via this plugin https://wordpress.org/plugins/wp-custom-body-class/
step 2: go to your divi theme directory and edit header.php just under where the variable $logo is initialized probably on line 231 then write below code with your specific class
//specific logo based on body class
$classes = get_body_class();
if (in_array(‘your-assigned-body-class’,$classes)) {
$logo=”http://abcd.com/logopath.png”;}
//specific logo based on body class
and done! may be helpful for someone.
Hi jmdrago,
Nope I am using Chrome. Actually, this is my case: the site I am supporting is bilingual. There is a logo already uploaded through Divi-Theme Options-Logo field. Now customer wants to add same logo but in English for the eng version of the site. So I tried following the instruction above (adding this css, image same size as the other one, not missing “””etc…)but for some reasons image is broken..
HIi JMdrago.
I have the same problem and get a broken image. I use Chrome and already checked everything what here above.
Do you now whats the problem is?
Hi there, I have the same broken image problem. Could this have something to do with the latest Divi update?
I have Divi version: 3.17.6 installed on the demo.
Removing the “” around the URL got rid of my broken image symbol!
/* Logo Change Page */
.page-id-155 img#logo {
content: url(http://campaignz.divireadythemes.com/wp-content/uploads/2018/06/political-REP.png);
}
Hopefully, this works for the others – thanks for your help!
Yes this works. Maybe change the main code in the instructions! Thank you so much!!!
Dev site is at: https://staging1.roamconsultingllc.com/ and the page ID is definitely 9 which is for the Leadership with Horses page. The image IS at the url in my CSS and I’ve triple checked the page number! Here’s what I’ve got:
.page-id-9 img#logo {
content: url(“https://staging1.roamconsultingllc.com/wp-content/uploads/2017/09/RoamLwHColor.png”) !important;
}
It’s true that it does work in Chrome which I hadn’t realized but I need it to work in FF. Is there a fix for that? I’ve tried removing the quote marks but that doesn’t seem to make it work in FF although it continues to work in Chrome with or w/o the quotes.
Too bad, this was SO simple and really seemed like it’d work! Any ideas or do I need to look for a different solution? Thanks!
OK…solved this! A friend sent me the CSS fix. Here’s what we did:
.page-id-9 img#logo {
display: none;
}
.page-id-9 .logo_container a {
content: url(https://staging1.roamconsultingllc.com/wp-content/uploads/2017/09/RoamLwHColor.png) !important;
max-height: 120%;
}
This is hiding the original image and then assigning the “content” image to the link that is wrapping the hidden image instead of replacing the image with an image.
It looks like this works in both Chrome and Firefox
Here’s the page with the unique logo https://staging1.roamconsultingllc.com/leadership-with-horses/ and you can click home or logo to see the other logo.
Thank you Sheila, this worked fantastically!
I tested this solution, but unfortunately it doesn’t work in Edge and Internet Explorer. I know not everyone provides support for those, but they’re essential to my client.
Hi! The broken image appears because you must change ” ” in URL image instead “”. Then, works fine.
Thanks for your snipped!!
Hi !! Thanks a lot for all ! And Thak you Sheila, your code works great !
I was looking to add different logos in multiple pages…
Do you know an additional code lighter than adding the same code again and again for each page ? I’m scared it might be too eavy.;.
Thanks in advance for your answer.
And a smile from France 😉
Oups .. Sorry … I though it didn’t work…
Hi all !
Fist of all thanks you very much for this !!!!!
I’m wandering how I could manage to get different logos depending on the content…
So appalying the method to multiple pages.
Do I have to copy and paste that code for all my pages ? Or is there something “lighter” ?
Thanks in advance for your help,
And a great “hello” from France ;).
Claire.
Hi Jmdrago
I like this but would like to make it a little bit better, this is so n editor can control the pages it appears on. would it be possible to encode this so that it works with any pages that have a particular parent page.
For example:
Parent page: http://www.mywebsite.com/english
The sub-page could be anything say, http://www.mywebsite.com/english/about.
So any page that is a sub of english would have a different logo to the default?
Many thanks, Helen
Helen:
I was able to achieve multiple page logos here: https://divireadythemes.com/magnewz
All I did was duplicate the original code, add the new PageIDs and the new image paths. So I have 3 different logos for 3 different pages.
I know it’s not the Parent Page solution you were looking for – I’m afraid that kind of coding is out of my pay grade.
/* Logo Change on MagNewz Page */
.page-id-272 img#logo {
content: url(“https://divireadythemes.com/magnewz/wp-content/uploads/2019/02/logo-yellow.png”);
}
.page-id-290 img#logo {
content: url(“https://divireadythemes.com/magnewz/wp-content/uploads/2019/02/logo-blue.png”);
}
Hi Jimdrago,
I have a problem with my Logo URL, might not be the same problem solve you have shown here but i hope you could help me, or adress me to someone who can.
I am working with Divi child Theme and uppdating my website. Everything worked fine until i relise that the old home page URL is stil connected to the logo on the new home page.
I have tried finding out what i can do but i cant find anything.
Please help.
This works great. Does anyone have ideas on how to also change the link behind the second logo? I have a page that I added the second logo to but when someone clicks the logo it takes them back to my homepage but I am trying to figure out how to have them directed to another URL. Any ideas?
I had trouble with Safari so had to add a :before and :after. Hope this helps someone else.
page-id-3399 img#logo {
display: none;
}
.page-id-3399 .logo_container a {
content: url() !important;
max-height: 100%;
}
.page-id-3399 .logo_container a:after {
content: url() !important;
max-height: 100%;
}
.page-id-3399 .logo_container a:before{
content: url() !important;
max-height: 100%;
}
This method doesn’t appear to work on Internet Explorer 11
Thank you very much for sharing this, it works great. Also thank you Sheila.
You are very welcome Roland!