Alternate logo on different pages code not working

Remove above code & add this to Page Settings > Advanced > Header

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.header-title-logo img').attr('src','https://beaverhero.com/wp-content/uploads/2019/12/squarespace-03-language-sites.png');
});
</script>

Thank you! However it won't let me place my image upload in place of where you have yours. (I delete your line from 'https://' and replace with my upload) Any reason for this?

On 9/29/2020 at 3:05 AM, sanluistacos said:

Thank you! However it won't let me place my image upload in place of where you have yours. (I delete your line from 'https://' and replace with my upload) Any reason for this?

UPload the image follow this guide. https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files

I tried the first css approach and found it didn't work in firefox. ( was fine in chrome and safari)

Here's a way to do it in vanilla javascript without calling jquery.

<script>
var ready = (callback) => {
  if (document.readyState != "loading") callback();
  else document.addEventListener("DOMContentLoaded", callback);
}

ready(() => { 
  /* Do things after DOM has fully loaded */ 
  document.querySelector('.header-title-logo a img').setAttribute('src','IMAGE_PATH')
});
</script>

Replace IMAGEPATH with a path to a file you uploaded. Full credit to this solution  https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/

@TomP This works great but is not respecting the logo sizing of the site. Have you been able to make that work? It's blowing it up even if I use css to force it to a certain size. 

@mingisdew sorry I didn't hit that issue. Both the original and swapped images were the same size so the new one must have slotted into the same sized "box"