How to add a second logo to my squarespace header in 7.1?

Site URL: https://swflgolf.org

Is it possible to add an additional logo to the right side of the header? CSS? Similar to the attached screenshot...

Hi. You need to use JavaScript to do this (a Business Plan or higher)

Also, the text on tablet is narrow. Do you want to resize them?

I have a similar issue. We want to add an icon/logo to the upper left side of the header as well as the text version currently shown on the center. Any workaround for this? Thanks

https://olive-dog-ss3h.squarespace.com/

password: thorne

19 hours ago, artpimpress said:

I have a similar issue. We want to add an icon/logo to the upper left side of the header as well as the text version currently shown on the center. Any workaround for this? Thanks

https://olive-dog-ss3h.squarespace.com/

password: thorne

Add to Settings > Advanced > Code Injection > Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('<a href="#" class="tlogo"><img src="https://cdn.pixabay.com/photo/2021/01/09/12/28/tulips-5902188__340.jpg"/></a>').appendTo('[data-nc-container="top-left"]');
	});
</script>
<style>
  a.tlogo img {
    width: 100px;
}
</style>

On 5/14/2021 at 7:40 AM, tuanphan said:

Add to Settings > Advanced > Code Injection > Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('<a href="#" class="tlogo"><img src="https://cdn.pixabay.com/photo/2021/01/09/12/28/tulips-5902188__340.jpg"/></a>').appendTo('[data-nc-container="top-left"]');
	});
</script>
<style>
  a.tlogo img {
    width: 100px;
}
</style>

That worked perfectly. Thank you so much!

I am trying for the same outcome, with this image: https://static1.squarespace.com/static/6049deef344d611b02167e20/t/60a1073da6ff1a1985429ba4/1621165886383/NATA+Logo.jpeg

to sit in the middle of the centre logo and the 'Contact Us' button. Any help would be greatly appreciated.

Site: https://polygon-avocado-ffw5.squarespace.com/ Password: ACE##21

1 minute ago, sarahprime said:

I am trying for the same outcome, with this image: https://static1.squarespace.com/static/6049deef344d611b02167e20/t/60a1073da6ff1a1985429ba4/1621165886383/NATA+Logo.jpeg

to sit in the middle of the centre logo and the 'Contact Us' button. Any help would be greatly appreciated.

Site: https://polygon-avocado-ffw5.squarespace.com/ Password: ACE##21

On 5/16/2021 at 7:03 PM, sarahprime said:

 

It looks like you solved this? Do you still need help?

Unfortunately not (I just gave up!). I have the company logo positioned, but I need this NATA logo to sit on the RH side of the phone number button. 

@sarahprime

sure, you can do this with just CSS, no javascript required. CSS has a property called content and a pseudo-selector ::after. You have to be careful with this as squarespace might legitimately use it themselves, but if you find the right class name or id selector you can do it easily enough. this should work. change the URL as needed.

put this in a code block somewhere on the page. or remove the <style> tags and put it in the site-wide CSS.

<style>
  
.header-actions::after {
  content:'';
  display:inline-block;
  width:50px;
  height:50px;
  margin-left:20px;
  background:url("https://images.squarespace-cdn.com/content/v1/600f62fff88eb259bc0f448d/1627162275205-1LJBGHMXHDN93NK9WR3F/square-avatar.png") no-repeat 0 0; 
  background-size:100%;
 
 }
</style>

You've done it!!!! Thanks so much!!

@iamdavehart Thanks for that, is it possible to add the logo to the top left rather than top right? in screenshot below, on the left the Gilead logo is part of the background image but that becomes a problem with different screen resolutions. The logo on the right is your code, id like to make go on the left and replace the background with a blank one. TYIA!

sure. just need to change the element it's putting the content into, and change it from after to before as its going on the left. if you're on 7.1 it will depend on how you've laid out your header. this should probably work, but if it doesn't then try changing ".header-title-nav-wrapper" to ".header-actions.header-actions--left"

<style>
  
.header-title-nav-wrapper::before {
  content:'';
  display:inline-block;
  width:50px;
  height:50px;
  margin-right:20px;
  background:url("https://images.squarespace-cdn.com/content/v1/600f62fff88eb259bc0f448d/1627162275205-1LJBGHMXHDN93NK9WR3F/square-avatar.png") no-repeat 0 0; 
  background-size:100%;
 
 }
</style>

change width and height and background url accordingly.

@iamdavehart amazing thank you

On 8/18/2021 at 4:38 PM, iamdavehart said:

sure. just need to change the element it's putting the content into, and change it from after to before as its going on the left. if you're on 7.1 it will depend on how you've laid out your header. this should probably work, but if it doesn't then try changing ".header-title-nav-wrapper" to ".header-actions.header-actions--left"

<style>
  
.header-title-nav-wrapper::before {
  content:'';
  display:inline-block;
  width:50px;
  height:50px;
  margin-right:20px;
  background:url("https://images.squarespace-cdn.com/content/v1/600f62fff88eb259bc0f448d/1627162275205-1LJBGHMXHDN93NK9WR3F/square-avatar.png") no-repeat 0 0; 
  background-size:100%;
 
 }
</style>

change width and height and background url accordingly.

 

@iamdavehart For some reason this didn't work for me, any idea how to get a small extra logo on the left hand side of the header, running in line with the search button? Website is: warners-stores.co.uk

Thanks!

23 hours ago, louis1996 said:

@iamdavehart For some reason this didn't work for me, any idea how to get a small extra logo on the left hand side of the header, running in line with the search button? Website is: warners-stores.co.uk

Thanks!

Add it here? Logo is clickable or non-clickable?

On 10/22/2021 at 3:05 PM, tuanphan said:

Add it here? Logo is clickable or non-clickable?

@tuanphan Yes exactly there, and non clickable please

Hi! I'm also trying to use the code @iamdavehart posted, but want to position my secondary logo in the center of the header while keeping my main logo on the left. What should I change? Thanks!

On 10/27/2021 at 12:07 AM, Vncent said:

Hi! I'm also trying to use the code @iamdavehart posted, but want to position my secondary logo in the center of the header while keeping my main logo on the left. What should I change? Thanks!

 

Hi. What is site url? We can check easier

On 10/22/2021 at 3:05 PM, tuanphan said:

Add it here? Logo is clickable or non-clickable?

@tuanphan Are you able to help with this? thank you!

On 11/2/2021 at 10:43 PM, louis1996 said:

@tuanphan Are you able to help with this? thank you!

Add to Last Line in Code Injection > Footer

<script>
  $(document).ready(function() { 
		$('<a href="https://beaverhero.com" class="logo1"><img src="https://content.invisioncic.com/p289038/monthly_2021_11/GEF_30Years_Logo_ARTTransparent-01.thumb.png.2b8888731ad6854ebf20eedc7da6ee33.png"/></a>').insertBefore('.header-title-nav-wrapper');
	});
</script>
<style>
  a.logo1 img {
    width: 100px;
}
</style>

Replace beaverhero, image url with new link/image you want.

On 11/6/2021 at 2:23 AM, tuanphan said:

Add to Last Line in Code Injection > Footer

<script>
  $(document).ready(function() { 
		$('<a href="https://beaverhero.com" class="logo1"><img src="https://content.invisioncic.com/p289038/monthly_2021_11/GEF_30Years_Logo_ARTTransparent-01.thumb.png.2b8888731ad6854ebf20eedc7da6ee33.png"/></a>').insertBefore('.header-title-nav-wrapper');
	});
</script>
<style>
  a.logo1 img {
    width: 100px;
}
</style>

Replace beaverhero, image url with new link/image you want.

@tuanphan That worked great, is there a way to make it only apply to desktop? As on mobile it is throwing the navigation button off the screen. Thank you!

I am trying to add another logo to the middle of the header, see image. How would I go about this?
 

On 11/8/2021 at 4:53 PM, louis1996 said:

@tuanphan That worked great, is there a way to make it only apply to desktop? As on mobile it is throwing the navigation button off the screen. Thank you!

Use this new code

<script>
  $(document).ready(function() { 
		$('<a href="https://beaverhero.com" class="logo1"><img src="https://content.invisioncic.com/p289038/monthly_2021_11/GEF_30Years_Logo_ARTTransparent-01.thumb.png.2b8888731ad6854ebf20eedc7da6ee33.png"/></a>').insertBefore('.header-display-desktop .header-title-nav-wrapper');
	});
</script>
<style>
  a.logo1 img {
    width: 100px;
}
</style>

On 11/8/2021 at 11:15 PM, Potter said:

I am trying to add another logo to the middle of the header, see image. How would I go about this?
 

What is your site url?