multiple logos for different pages

[GaryFT]

#575800

Is there somehow a way i can exchange the logo in the header for a new page?

Page A – Logo A
Page B – Logo B
and so on

[Hassan T.]

#585933

This won’t be possible with the provided options of Avada and requires a custom solution. You can follow this tutorial on how to have a different logo for a specific page.

[Aragosta]

#707310

Hello Hassan work fine!

But but I saw that it does not manage the retina logo, what can I do?

Thank you
Marco

[Aragosta]

#707926

Hassan i solved!

[Romero L.]

#729631

Sensei @marklchaves, how would you solve this?

I want to have a logo on my home page and another logo, on the other pages. Hopefully you know a nice trick….thanks as always!

[Hassan T.]

#729747

This won’t be possible with the provided options of Avada and requires a custom solution. You can follow this tutorial on how to have a different logo for a specific page.

[marklchaves]

#729958

Hello @paulstartups,

Thanks again for the A2A! I replied yesterday. I think my post went into the moderation bit bucket. I reposted on GitHub.

Thanks!

[Romero L.]

#729964

I just saw it @marklchaves! It’s a really nice solution, thanks a lot for sharing it! and I’m glad more people will benefit from your answer 🙂

PS: Too bad it went to the moderation bucket, that shouldn’t happen.

[Romero L.]

#730110

Hi again @marklchaves!

Thank you again for the complete explanation, if you wouldn’t have explained the processes to get the page ID I would have been stuck.

I just apply it to my site and it works really nice on desktop! However, on my iphone the new logo looks blurry because of the retina display. Do you know a way to solve this since the retina size logo most be 2X the desktop size?

Thanks again!!

[Romero L.]

#730114

Hi @hassant! I didn’t get it the first time I saw it, but now I do. Thank you!

[marklchaves]

#730238

Hello @paulstartups,

Thanks for the Retina follow-up question. I updated my post with the CSS media queries for Retina on Avada.

Please give that a try.

Thanks! 🙂

[Romero L.]

#730787

Hello @marklchaves hope you’re having a great day!

Thank you for taking the time to help me with this 🙂

I tried with the updated CSS code on your post, but for some reason, now is not showing any logo. My retina logo size is (height: 88px and width: 450px) so I updated the background-size to (44px 225px;).

Do I need to change something else, may be something in the media queries?

Thanks!

[marklchaves]

#731535

Hi @paulstartups,

You’re welcome.

I should always caveat all custom CSS added to Avada may need the !important directive. You can always use your dev tools inspector to verify what to override.

You might have to use !important in the code I provided especially for these three when you see them. Remember the pixel dimensions are from my examples.

    display: block !important;
    height: 65px !important;
    width: 65px !important;

If these don’t work, I’d need to look at the code to make any meaningful diagnosis.

Good luck!

[Romero L.]

#732148

Hi @marklchaves!

Thanks a lot! I added the !important directive to those 3, and it didn’t work at the beginning, it wasn’t showing any logo. I felt that the reason was related to the media queries, so I decided to hide them. When I did, it showed the logo distorted. Then I change back the background size to 100% and it showed properly, even in my retina phone 🙂 ….it seems that the media queries were not necessary. We only need to use your code with the retina logo (2X the size) and set the height and width to the wanted size (1X), and not forgetting to add the !important directive.

Thanks again for helping me and for sharing your knowledge with the community!!

[marklchaves]

#732189

Wonderful, @paulstartups! Exceptional CSS detective work on your end. 🙂

I wonder if this is browser-specific. Which browser were you using for this issue?

[Author]

Posts