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
 

Edited by MichaelG_2001
Link to comment
  • MichaelG_2001 changed the title to Alternate logo for mobile header (7.0)

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.