Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


Jacquelyn

Question

13 answers to this question

Recommended Posts

  • 0

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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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>

image.thumb.png.a1418a7222e8b41b0841b7e7801c9d36.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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>

image.thumb.png.a1418a7222e8b41b0841b7e7801c9d36.png

That worked perfectly. Thank you so much!

Link to comment
  • 0
On 5/16/2021 at 7:03 PM, sarahprime said:

 

Ace Snapshot.JPG

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

image.thumb.png.128208c27b2173c02a08a660d2a73a88.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

 

Dave Hart. Software/Technology Consultant living in London

Link to comment
  • 0

@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!1928475549_ScreenShot2021-08-18at11_44_06pm.thumb.png.aa351b354bbd2d5473bf229ef379085e.png

Link to comment
  • 0

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.

 

Edited by iamdavehart

Dave Hart. Software/Technology Consultant living in London

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