Alternate logo for mobile header (7.0)

Site URL: https://oleander-pomegranate-ka8f.squarespace.com

Hello there.

I'm trying to use a more horizontal version of a logo for the mobile site header than what is used for desktop on this site:
https://oleander-pomegranate-ka8f.squarespace.com
password: temporaryrebel

I found this code online and it works great... in Safari and Chrome, but not in Firefox.

  .Mobile-bar-branding-logo { content: url("https://static1.squarespace.com/static/5f91e45ce9c9a7197e80ca05/t/5fd3bfffddb92d04d71dafa2/1607712767117/blackStag_mobile_logo2.jpg") !important;

max-height: 53px;
min-height: 30px;
width:auto !important;
}

Anybody have any guesses why this might be happening or an alternative approach? The main logo does have some coding applied to it in order create an overlay of the banner image, but I stripped it out and the alternate mobile logo still fails in Firefox.

Thanks in advance!
Michael
 

Add this to Home > Settings > Advanced > Code Injection > Footer. Disable Ajax Loading if the code doesn't work.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.Mobile-bar-branding-logo').attr('src','https://static1.squarespace.com/static/5f91e45ce9c9a7197e80ca05/t/5fd3bfffddb92d04d71dafa2/1607712767117/blackStag_mobile_logo2.jpg');
});
</script>

Thank you so much!
You are an absolute wizard.