Jump to content

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

Recommended Posts

Hi @nick_shthanks for your help so far, unfortunately I can't seem to make it look right no matter what values I try.

Is there also a way to link the 2nd 'Tigger' Logo to another website?
https://drum-dachshund-bk48.squarespace.com/
PW: Ground

Code:

<style>
  
.header-title-nav-wrapper::before {
  content:'';
  display:block;
  width:40px;
  height:50px;
 display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;


  background:url("https://static1.squarespace.com/static/65a653615bdab40fa3088ade/t/65bb67abd9f70805bc1794b2/1706780587600/Trigger_Logo.png") no-repeat 0 0; 
  background-size: contain;
width: 50% !important;
width:10px;
 }
  
</style>

Link to comment
  • 1 month later...
On 8/18/2021 at 8:38 AM, 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.

 

This was super helpful! thank you!

It works great on desktop, but not mobile. is there something else that needs to be added for it to appear on both?

Link to comment
10 hours ago, PonderosaDigital said:

This was super helpful! thank you!

It works great on desktop, but not mobile. is there something else that needs to be added for it to appear on both?

You can change it to this

<style>
  .header-title-nav-wrapper::before, .header-display-mobile .header-title: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>

 

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
  • 2 months later...

Hi @iamdavehart,

Appreciate the code you have shared here. I tried using it to add a second right aligned logo however I have a vertical alignment issue. Can you tell me how I can fix this and add a href to another website opening in a new window? This is the code I have added and screenshot attached showing the alignment.

//*Extra Header Logo*//
  
.header-actions::after {
  content:'';
  display:inline-block;
  width:100px;
  height:80px;
  margin-left:40px;
  background:url("https://images.squarespace-cdn.com/content/663b1fecea1fe32bed628220/25f5b912-7054-40ef-9c55-98400a3dfebf/ctc_logo.png?content-type=image%2Fpng") no-repeat 0 0; 
  background-size:100%;
 
 }



Many thanks in advance.
Julia

Screenshot 2024-05-27 at 10.09.21.png

Link to comment
On 5/27/2024 at 7:14 AM, lauren6 said:

Hi @iamdavehart,

Appreciate the code you have shared here. I tried using it to add a second right aligned logo however I have a vertical alignment issue. Can you tell me how I can fix this and add a href to another website opening in a new window? This is the code I have added and screenshot attached showing the alignment.

//*Extra Header Logo*//
  
.header-actions::after {
  content:'';
  display:inline-block;
  width:100px;
  height:80px;
  margin-left:40px;
  background:url("https://images.squarespace-cdn.com/content/663b1fecea1fe32bed628220/25f5b912-7054-40ef-9c55-98400a3dfebf/ctc_logo.png?content-type=image%2Fpng") no-repeat 0 0; 
  background-size:100%;
 
 }



Many thanks in advance.
Julia

Screenshot 2024-05-27 at 10.09.21.png

With CSS :after, you can't add link to logo. 

If you share site url, we can help easier. Or you can use this case, I shared.

 

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.