Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Change Mobile Homepage Logo


lbrommer

Question

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 post
  • Answers 18
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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-

18 answers to this question

Recommended Posts

  • 0

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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0
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>

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0
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 post
  • 0
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>

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0
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 post
  • 0
1 hour ago, IXStudio said:

Hi
Your logo is not loading!

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.

Link to post
  • 0
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 post
  • 0
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 post
  • 0
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>

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...