Change Logo Image on Specific Pages for desktop & mobile

I'm using Brine.

I'm changing my logo image on specific pages by inserting the script below into the page header.

However, since this only affects desktop with 'Header-branding-logo', the logo is not getting changed on the mobile versions of these pages.

<script>
 window.onload = function() {
   document.getElementsByClassName('Header-branding-logo')[0].src = 'URL_TO_IMAGE';  
 };
</script>

How would I add the functionality into this script or just use a new method to change the logo image on both desktop and mobile?

Thanks in advance. 

Ok, so I did some more digging and found a different method that is working!

Inject this code into your header via "advanced":

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
  <!-- Change logo image on desktop and mobile. From comments of https://www.youtube.com/watch?v=_3CQd5WGrsI search for “josh ison” and you’ll see the thread. -->
    
$(function() {$('.Header-branding-logo, .Mobile-bar-branding-logo') .attr('src', 'YOURLOGOURL')}) 
</script>