Jump to content

Change Mobile Homepage Logo

Recommended Posts

Hi, I have successfully changed my logo on my mobile version to a longer, rectangular logo to fit the screen better instead of the square-shaped logo I have on my desktop site. However, with the photo on my homepage my logo disappears. I'd like the blue logo on all of my pages, but I need the logo to be white on my homepage. The blue shows up when the navigation bar is open which is great, but that blue logo is hard to see on the main homepage. I have successfully coded so that I have a white logo only on my homepage for desktop, but I need the same for mobile. 

Link to comment
  • Replies 18
  • Views 978
  • Created
  • Last Reply

Add to Code Injection Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.header-mobile-logo img').attr('href','https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg');
});
</script>

Replace with your logo url

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
  • 2 weeks later...
15 minutes ago, lbrommer said:

I still need help with this!

Try this code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.header-mobile-logo img, .header-mobile-logo img').attr('href','https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.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
8 minutes ago, tuanphan said:

Try this code


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.header-mobile-logo img, .header-mobile-logo img').attr('href','https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg');
});
</script>

Still not working 😞 I hit the mobile icon, then edit --> advanced -->  and inserted the code there. Is there something else I need to be doing?

Link to comment
22 hours ago, lbrommer said:

Still not working 😞 I hit the mobile icon, then edit --> advanced -->  and inserted the code there. Is there something else I need to be doing?

ah sorry, invalid attribute, use this new code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.header-mobile-logo img, .header-mobile-logo img').attr('src','https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.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
On 9/12/2020 at 11:08 AM, tuanphan said:

ah sorry, invalid attribute, use this new code


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.header-mobile-logo img, .header-mobile-logo img').attr('src','https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg');
});
</script>

 

Fantastic, it worked thank you!! Is there a way to keep that original blue logo on the homepage when the navigation bar is open?

Link to comment
36 minutes ago, lbrommer said:

Weird! On mobile or desktop? And homepage or navigation? It's popping up for me, but I'm needing help with changing the mobile navigation logo to blue, not white.

Use this code in Design -> Custom CSS

[data-mobile-header-editing="true"] .header .header-title--use-mobile-logo .header-mobile-logo img {
filter: invert(53%) sepia(99%) saturate(2783%) hue-rotate(185deg) brightness(88%) contrast(90%) !important;
}




    

Please use the like button if it helps you!

Best,
Leopold

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to comment
4 hours ago, IXStudio said:

Use this code in Design -> Custom CSS


[data-mobile-header-editing="true"] .header .header-title--use-mobile-logo .header-mobile-logo img {
filter: invert(53%) sepia(99%) saturate(2783%) hue-rotate(185deg) brightness(88%) contrast(90%) !important;
}




    

Please use the like button if it helps you!

Best,
Leopold

Didn't work for me 😞

Link to comment
On 9/21/2020 at 4:06 AM, lbrommer said:

Yep exactly. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('body:not(.header--menu-open) .header-mobile-logo img, body:not(.header--menu-open) .header-mobile-logo img').attr('src','https://static1.squarespace.com/static/5f2da89fc1bc674879df58d5/t/5f482190346aab1905e7bc86/1598562704379/Copy+of+Untitled.png');
});
</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.