Jump to content

How can I put two logos in my header on either side of navigation links?

Recommended Posts

On 11/4/2022 at 10:04 PM, tuanphan said:

Add this to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('<a class="second-logo" href="https://google.com"><img src="https://cdn.pixabay.com/photo/2021/07/09/06/57/lavender-6398425__480.jpg"/></a>').appendTo('.header-display-desktop .header-actions.header-actions--right');
	});
</script>
<style>
  a.second-logo img {
    max-width: 70px;
}
a.second-logo {
    margin-left: 2.5vw;
}
</style>

 

May I is there a way to have it applied on mobile also? Thank you.

image.thumb.png.d58d986da7f4f644a3457a0c2ee0f79d.png

Link to comment
  • 3 weeks later...
On 12/2/2022 at 10:20 PM, GabrielaPar said:

Hi Tuanphan, Hope you can help me. I used your code for adding a clickable logo to my header and it worked perfectly but I want it to be on the left side of the header. Is there a way to do it?

Thank you so much

What is your site url? We can adjust code easier

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

Hello @tuanphan

I was wondering if you could help me with a code to insert a secondary logo to the right of the header. Website is: https://kawasaki-polanco.squarespace.com, password: kawasakipolanco - to the right of the shopping kart.

It would be of amazing if you could help me. I have tried the codes I've seen in the recent conversations, however I can't manage to tweak them to what I need... thank you so much in advance!

image.thumb.png.6392a6cfaecf4ac317acacb1286dd17e.png

Link to comment
On 12/16/2022 at 10:12 AM, JimenaD said:

Hello @tuanphan

I was wondering if you could help me with a code to insert a secondary logo to the right of the header. Website is: https://kawasaki-polanco.squarespace.com, password: kawasakipolanco - to the right of the shopping kart.

It would be of amazing if you could help me. I have tried the codes I've seen in the recent conversations, however I can't manage to tweak them to what I need... thank you so much in advance!

image.thumb.png.6392a6cfaecf4ac317acacb1286dd17e.png

kawasakipolanco

password is incorrect

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
  • 1 month later...
On 11/10/2022 at 4:50 PM, caminada said:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('<

Hi Camianada, what did you place in the SRC? did you just copy this? and where did you place the link of your logo?

Link to comment
20 hours ago, notthatguru said:

Hi Camianada, what did you place in the SRC? did you just copy this? and where did you place the link of your logo?

image.thumb.png.a3e9e5dc0978124a59089b58409e898a.png

change link in href & src

Edited by tuanphan

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 1/27/2023 at 8:27 PM, notthatguru said:

Hi Camianada, what did you place in the SRC? did you just copy this? and where did you place the link of your logo?

Hi Notthatguru, I create a link for my logo png by uploading to Design > Custom CSS > Manage Custom Files

image.thumb.png.85408fce5b9397b7d45b76cad5b8bfbe.png

then I modify the href link and logo src link with Tuanphan's code.

image.thumb.png.34281ee13fe6de897872a73041a03c3b.png

Link to comment
  • 4 weeks later...
On 3/1/2023 at 2:21 AM, kellicox90 said:

Hello! I've added the code and managed to get the 2x logos working on desktop, but cannot see a solution how to get it to show in the mobile view. Are you able to help?

URL https://lime-raspberry-ywg5.squarespace.com/ PW GSR123

Thanks in advance.

Which position on mobile? Left of current logo or?

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
  • 1 month later...
On 4/24/2023 at 3:39 PM, CharlieReep said:

Hello, a customer which has come to be needing a new site as there's is down, needs a holding page which i have done. but wanted to know if someone could help me to get a logo on top left and top right on the header? this is the link www.lidster.co.uk

Add a logo here? Clickable or non-clickable?

image.thumb.png.aaf6fe50ccb06a9b9aa88c563a9c5c70.png

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
  • 1 year later...

Hi @tuanphan in case I want my second logo to be placed next to main logo on the left side. Kindly advise css? Thank you.
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('<img class="second-logo" src="https://cdn.pixabay.com/photo/2021/07/09/06/57/lavender-6398425__480.jpg"/>').insertBefore('.header-display-desktop');
	});
</script>
<style>
  img.second-logo {
    width: 100px;
}
</style>
Link to comment
On 5/23/2024 at 10:31 AM, Ash1920 said:

Hi @tuanphan in case I want my second logo to be placed next to main logo on the left side. Kindly advise css? Thank you.
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('<img class="second-logo" src="https://cdn.pixabay.com/photo/2021/07/09/06/57/lavender-6398425__480.jpg"/>').insertBefore('.header-display-desktop');
	});
</script>
<style>
  img.second-logo {
    width: 100px;
}
</style>

Depend on your site header layout. If you share site url, I can check easier

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

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.