Different logo for each language

Hello,@martindrz!

Here is the working solution for you:

First, you need to find the specific page ID number on the page which you want to apply the custom logo image.

to discover the page id, please follow the steps below :

1. Navigate in your browser to the page you want to work with.
2. Right-click on that page (anywhere) and select “Inspect Element“.
3. Search inside the site’s markup for the body tag. It should be one of the first element in the source.
You’ll see it has many classes. Look for the class that starts with “page-id-…”. That’s the class you should use.

You can check THIS video guide

then, Open the Customizing->General->Additional CSS
and Copy/Paste the code below for every page you want to change the logo image and replace the page ID and URL to the image for each page.

.page-id-64 .pull-left  a img{
    display: none;}
.page-id-64 .pull-left  {
  background-image: url(https://static1.squarespace.com/static/576280dd6b8f5b9b197512ef/t/5b56f91003ce642b5e2547f3/1532426517948/Facts-image-8.gif?format=1000w);
  background-size: contain!important;
  width: 250px;
  height: 250px;
  background-position: center;
  background-repeat: no-repeat;
}

https://prnt.sc/litsgz

Regards

• This reply was modified 6 years, 4 months ago by themevision.

Wow! Thank you so much!

It’s working with the logo, but the shrinking header is not working anymore when I put in your code. Hm…

Hi,@martindrz!

In order to have a shrinking header, add next code additionally:

.page-id-62 .sticky-header-shrink .pull-left  {
  background-image: url(https://www.saxon-roots.de/wp-content/uploads/2018/10/LogoEN.png);
  background-size: contain!important;
    width: 93px;
    height: 93px;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

Change the width and height values per your needs.

Also, insert this lines into the code I give you earlier:

-webkit-transition: height 0.4s;
-moz-transition: height 0.4s;

so, in the end, your whole code per page should look like this:

.page-id-62 .pull-left  a img{
    display: none;}
.page-id-62 .pull-left  {
  background-image: url(https://www.saxon-roots.de/wp-content/uploads/2018/10/LogoEN.png);
  background-size: contain!important;
  width: 250px;
  height: 250px;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-transition: height 0.4s;
  -moz-transition: height 0.4s;
}

.page-id-62 .sticky-header-shrink .pull-left  {
  background-image: url(https://www.saxon-roots.de/wp-content/uploads/2018/10/LogoEN.png);
  background-size: contain!important;
  width: 93px;
  height: 93px;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

https://prnt.sc/lj9udi

Regards

• This reply was modified 6 years, 4 months ago by themevision.

Thank you so much! ??

@themevision i tried that solution, it works, but why the logo image keeps repeating in the footer also? I hope you see this as soon as possible. really need a solution to this..

Hello, @bibbi1!

Can you give me a link to your website?

Hello, @themevision check it here..
Let me know when you do. Thanks

• This reply was modified 5 years, 10 months ago by bibbi1.

here is it how it appears on the other pages.subpages of the site..check the footer also..

As there is no problem when the change happens in the main (home) page but at the others, the logo repeats

• This reply was modified 5 years, 10 months ago by bibbi1.

Hello,@bibbi1!

The next code should help you:

.ironthm-copyright.pull-left {
background: none!important;    
}

Regards

Thank you very much! that really really helped :)) May you have a blessed day!

Hi, @bibbi1!

You are welcome.

I m glad I could help. ??

Dear @themevision , as I am resuming the yesterday’s work (regarding the same website), would you mind if you check this https://tinyurl.com/y2poy9nt why the logo repeats itself behind the content of the “news” blog page and it is moving the entire content towards left by narrowing it..?

Could you please have a look at it?
Big thanks in advance.

Hello,@bibbi1!

If you want your logo appears only in the header area, you need to insert the .ironthm-header-middle class, before the .pull-left.

So your code should look like this:

.page-id-4473 .ironthm-header-middle .pull-left {
    background-image: url(https://www.drzavnopravobranitelstvo.gov.mk/wp-content/uploads/2019/04/Small.png);
    background-size: contain!important;
    width: 448px;
    height: 120px;
    background-position: center;
    background-repeat: no-repeat;
}

https://prnt.sc/nmtvzm

Also, I noticed that your blog post thumbnails are missing…to fix that
you need to insert same class in this code too,

.page-id-4473 .ironthm-header-middle .pull-left  a img{
    display: none;
}

If you want your logo to appear on all pages (and not just individual ones), you can use only these two codes for all pages:

.ironthm-header-middle .pull-left  a img{
    display: none;}

.ironthm-header-middle .pull-left {
    background-image: url(https://www.drzavnopravobranitelstvo.gov.mk/wp-content/uploads/2019/04/Small.png);
    background-size: contain!important;
    width: 448px;
    height: 120px;
    background-position: center;
    background-repeat: no-repeat;
}

in that case, you can freely remove all 25 codes you have previously inserted.

https://prnt.sc/nmu4hc

Hope this will help you.

Regards

• This reply was modified 5 years, 10 months ago by themevision.
• This reply was modified 5 years, 10 months ago by themevision.

Thank you Tons!! @themevision ! you are incredible:) wish I had your knowledge.

All the best!
bibbi