Change Mobile Homepage Logo

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. 

Hi,
Please share your website URL.

Best,
Leopold

On 8/27/2020 at 6:03 PM, IXStudio said:

Hi,
Please share your website URL.

Best,
Leopold

Laurenbeane.com 

PW: Lauren123

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

@tuanphan Hmm, not working for me. The logo is still showing as blue on the homepage for mobile instead of white

I still need help with this!

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>

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?

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>

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?

On 9/18/2020 at 1:28 AM, lbrommer said:

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

Blue: nav open

White: nav closed?

On 9/18/2020 at 11:44 PM, tuanphan said:

Blue: nav open

White: nav closed?

Yep exactly. 

Still need help with this 🙂

36 minutes ago, lbrommer said:

Still need help with this 🙂

Hi
Your logo is not loading!

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.

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

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 😞

Please contact me via DM. 

17 minutes ago, lbrommer said:

Didn't work for me 😞

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>