Jump to content

Alternate logo for mobile header (7.0)

Recommended Posts

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
 

Link to comment
  • MichaelG_2001 changed the title to Alternate logo for mobile header (7.0)
  • Replies 2
  • Created
  • Last Reply

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.