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

I've managed to install the logo from this code:
 

but the logo isn't centred and the menu bar isn't transparent?

https://green-sunfish-5s9c.squarespace.com/config/settings/advanced/code-injection

Can't get it work with your code, is this correct?

On 11/10/2021 at 8:45 PM, Potter said:

I've managed to install the logo from this code:
 

but the logo isn't centred and the menu bar isn't transparent?

https://green-sunfish-5s9c.squarespace.com/config/settings/advanced/code-injection

Can't get it work with your code, is this correct?

The site is private. Can you setup password & share url again? We can check easier

https://green-sunfish-5s9c.squarespace.com/

LHPa55w0rd

On 11/10/2021 at 8:45 PM, Potter said:

I've managed to install the logo from this code:
 

but the logo isn't centred and the menu bar isn't transparent?

https://green-sunfish-5s9c.squarespace.com/config/settings/advanced/code-injection

Can't get it work with your code, is this correct?

Your code is missing a jquery library.

Don't remove any code

Add this to CODE INJECTION > HEADER

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Hi, I have added the code but it doesn't seem to have done anything?
Should this have helped the logo centre and transparent header?

On 11/16/2021 at 4:51 PM, Potter said:

Hi, I have added the code but it doesn't seem to have done anything?
Should this have helped the logo centre and transparent header?

Can you take a screenshot code in Code Injection > Footer?

There isn't any code in the footer at the moment

On 11/14/2021 at 8:49 PM, tuanphan said:

Your code is missing a jquery library.

Don't remove any code

Add this to CODE INJECTION > HEADER

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 

Add this code in Code Injection > Header

And Don't remove code You used in Code Injection Footer

Hi I haven't used any code in the footer and added your code to the header but it hasn't done anything? Basically I need the image to be behind the header rather than a green bar.

On 11/10/2021 at 8:45 PM, Potter said:

I've managed to install the logo from this code:
 

but the logo isn't centred and the menu bar isn't transparent?

https://green-sunfish-5s9c.squarespace.com/config/settings/advanced/code-injection

Can't get it work with your code, is this correct?

Looks at this screenshot, you will see some code in "Footer". Copy it & Do not remove current code in Code Injection Header

Hi, sorry I don't understanding. This is what I currently have (see attached), the screen grab you are referring to is where the centre logo isn't added and wasn't working.

Could you tell me what I need in the header and footer? If I move the coding from the header to the footer the logo goes to the bottom? 

On 11/23/2021 at 10:20 PM, Potter said:

Hi, sorry I don't understanding. This is what I currently have (see attached), the screen grab you are referring to is where the centre logo isn't added and wasn't working.

Could you tell me what I need in the header and footer? If I move the coding from the header to the footer the logo goes to the bottom? 

Remove all code in Code Injection & Add this new code into Code Injection Foter

<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>

I've doe. that but now the logotype is not in the middle of the header? Which was I am trying got do?

20 hours ago, Potter said:

I've doe. that but now the logotype is not in the middle of the header? Which was I am trying got do?

You mean Logo (Middle) - Burger (right)?

I am trying to add the logotype into the middle top of the header on the desktop version (see attached).
 

22 hours ago, Potter said:

I am trying to add the logotype into the middle top of the header on the desktop version (see attached).
 

Sorry. Too many message so I don't remember your question.

Can you remove all code in COde Injection, then I will test & give new code

I've sorted it don't worry

On 12/1/2021 at 7:41 AM, Potter said:

I've sorted it don't worry

Hi @Potter I'm trying to do exactly what you did, add a second logo to the center of my header. Can you let me know what you did please? This thread was rather confusing. Haha

6 hours ago, bigpoppapaul said:

Hi @Potter I'm trying to do exactly what you did, add a second logo to the center of my header. Can you let me know what you did please? This thread was rather confusing. Haha

Can you share link to your site? We can check & give new code

Is there a way to do this on 7.0 (Brine)? I'm trying to add a secondary logo to the top left corner (current logo is center)

On 1/15/2022 at 12:27 AM, mymbym said:

Is there a way to do this on 7.0 (Brine)? I'm trying to add a secondary logo to the top left corner (current logo is center)

If you share link to your site, we can give the code to do this

@iamdavehart code worked for me! But it doesn't show up on my mobile version. Anyone out there know any code to have both logos appear on my mobile view as well? (see screenshots for reference)

On 2/2/2022 at 11:52 AM, Mere3 said:

@iamdavehart code worked for me! But it doesn't show up on my mobile version. Anyone out there know any code to have both logos appear on my mobile view as well? (see screenshots for reference)

What is your site url?

On 7/27/2021 at 4:11 AM, iamdavehart said:

@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>

 

@iamdavehart I'm using this site wide, but need the image to be a clickable link. Can you share the code to do so?

  <style>

.header-actions::before {

  content:'';

  display:inline-block;

  width:150px;

  height:150px;

  margin-left:20px;

  background:url("https://static1.squarespace.com/static/61ab82ed9c91ed2eba1740d1/t/620175ddf8948e5e2e8d9997/1644262877126/Donate+button.png") no-repeat 0 0;

  background-size:100%;

}

</style>

On 2/8/2022 at 3:49 AM, Alexamc89 said:

@iamdavehart I'm using this site wide, but need the image to be a clickable link. Can you share the code to do so?

 

  <style>

.header-actions::before {

  content:'';

  display:inline-block;

  width:150px;

  height:150px;

  margin-left:20px;

  background:url("https://static1.squarespace.com/static/61ab82ed9c91ed2eba1740d1/t/620175ddf8948e5e2e8d9997/1644262877126/Donate+button.png") no-repeat 0 0;

  background-size:100%;

}

</style>

No way to make image (added by :before) clickable. You need to use jQuery code to add clickable image. Can you share link to your site? We can test & give code eaiser