Version 7.1 help needed- different logos on different pages

Hi all,

My website link is https://shallot-piano-yxfr.squarespace.com/config/ and the password to see it:11223344. I use version 7.1 and the template is Almar.

I want to use my black logo for most of the pages and change it to white in couple other pages. Tried some custom CSS provided on other posts but didn't work. Any help would be appreciated. Attaching my logos...

Thanks

@basakatac Add to Home > Design > Custom CSS if you want to use white logo

body#collection-5d929569ed1a224763913fb9 .header-title-logo img, body#collection-abcxyz2t43td1a224763913fb9  .header-title-logo img {
    -webkit-filter: invert(1);
    filter: invert(1);
}

with body#collection....b9 and is Page ID. Each page will have different ID. See how to find page id.

@tuanphan thank you so much for the response, it worked but it also changed the green color to purple. That's why I uploaded my 2 logos, white one should remain the green parts. Now it is like this:

@tuanphan hi again! Could you please provide more information about the CSS you sent?? I couldn't find any other solution

@basakatac you can insert this code to Page Settings > Advanced > Header

<script>
 window.onload = function() {
   document.querySelectorAll('.header-title-logo img')[0].src = 'https://truyencv.com/images/no_avatar.jpg';
 };
</script>

Repalce https:///.jpg with new logo image url.

@tuanphan thank you so much! it worked well, but when I go to the actual site it takes 2-3 secs the logo to change. By any chance do you know why? or is there anything to do to fix it?

On 11/2/2019 at 4:39 AM, tuanphan said:

@basakatac you can insert this code to Page Settings > Advanced > Header

<script>
 window.onload = function() {
   document.querySelectorAll('.header-title-logo img')[0].src = 'https://truyencv.com/images/no_avatar.jpg';
 };
</script>

Repalce https:///.jpg with new logo image url.

I'm looking for the same kind of solution, but that code does not work for me at all. I am using the Miller template, the site is www.johnlynchspeaks.com. I tried the above code and it doesn't do anything. The code I've been using is as follows but it has some issues:

<script>
    window.onload = function() 
  {document.getElementsByClassName('Header-branding-logo')[0].src = 'https://static.wixstatic.com/media/2279fb_db1043088564425bb18696d17a327498~mv2.png/v1/fill/w_343,h_134/JLS-logo-light.png';  
    };
  </script>

The problem I have is that this code doesn't "trigger" for some reason unless you refresh the page—so the light logo shows up on the homepage when you first visit the site, but on the other pages where the dark logo is supposed to show up, it doesn't unless you refresh the page. And the same thing happens if you first visit the site from a subpage—the correct dark logo shows up, but then if you navigate to the home page, the dark one shows there as well until you refresh the page.

Anyone have a fix?

On 11/2/2019 at 7:39 AM, tuanphan said:

@basakatac you can insert this code to Page Settings > Advanced > Header

<script>
 window.onload = function() {
   document.querySelectorAll('.header-title-logo img')[0].src = 'https://truyencv.com/images/no_avatar.jpg';
 };
</script>

Repalce https:///.jpg with new logo image url.

this worked for me on desktop, but I'm having trouble making this work for mobile. Can you help?

12 hours ago, lbrommer said:

this worked for me on desktop, but I'm having trouble making this work for mobile. Can you help?

Can you share site url? We can check easier.

On 8/28/2020 at 4:10 AM, tuanphan said:

Can you share site url? We can check easier.

LaurenBeane.com

PW: Lauren123

On 8/27/2020 at 9:17 PM, lbrommer said:

this worked for me on desktop, but I'm having trouble making this work for mobile. Can you help?

I also have a problem getting it to work on my mobile view. Any help on how to fix that?

URL: https://herring-grouse-6mkf.squarespace.com/
pw: magritte123

17 hours ago, sarur said:

I also have a problem getting it to work on my mobile view. Any help on how to fix that?

URL: https://herring-grouse-6mkf.squarespace.com/
pw: magritte123

For Homepage or which page?

@tuanphan I was only thinking on the homepage header (since that's where there's a photo as background for the header, the other pages are just white). But now that you mention it, I noticed the green logo won't show on the mobile navigation regardless of page since the drop down navigation has a green background. 

Is it possible some how to change the logo only on the drop down navigation (on each page) – but keep the original one in the header, when navigation not open?  

23 hours ago, sarur said:

@tuanphan I was only thinking on the homepage header (since that's where there's a photo as background for the header, the other pages are just white). But now that you mention it, I noticed the green logo won't show on the mobile navigation regardless of page since the drop down navigation has a green background. 

Is it possible some how to change the logo only on the drop down navigation (on each page) – but keep the original one in the header, when navigation not open?  

You mean

• Change logo when overlay menu is open (on each page) (screenshot). Is this right?
• Keep  original logo when overlay menu is close.

@tuanphan Exactly! When overlay menu is open, I need to change the logo to the white one. 

On 12/7/2021 at 3:59 PM, sarur said:

@tuanphan Exactly! When overlay menu is open, I need to change the logo to the white one. 

Hi. Add to Design > Custom CSS

body.header--menu-open .header-title-logo img {
    filter: brightness(0) invert(1);
}