Alternate logo on different pages code not working

Site URL: https://www.actuatelaw.com/services

When I originally uploaded this code for a client to swap out a different logo color on a different page, it was working. However, recently something has changed and it's no longer displaying. Any help on how to change it? I originally inserted this code into the page's header:

<style>
.header-title-logo a {
    content: url("https://static1.squarespace.com/static/5ee7ac6c0dd81c33d50f18c1/t/5f04adb33d7efb7d6678fdd3/1594142131192/actuate_horizontal_white.png");
  }
</style>

Here is the page where it's not displaying: https://www.actuatelaw.com/services

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"