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

On 2/12/2022 at 8:40 AM, tuanphan said:

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

site isn't currently live yet, but it is https://gofar.dog and password is GoFar#Doggie. Thank you!

On 2/15/2022 at 9:05 PM, Alexamc89 said:

site isn't currently live yet, but it is https://gofar.dog and password is GoFar#Doggie. Thank you!

Thank you

On desktop: Clickable image will be next to donate Button

Mobile: next to burger

Is this right?

This thread is very helpful, thank you.  I've used @iamdavehart's code, but I'm wondering how to vertically align the logo (3 anchors on the right side)?  I tried adding a vertical-align: middle; without the desired result.

https://primrose-beige-fej3.squarespace.com/

password: ReinholdFinancial

On 1/24/2023 at 11:18 PM, EdHart said:

This thread is very helpful, thank you.  I've used @iamdavehart's code, but I'm wondering how to vertically align the logo (3 anchors on the right side)?  I tried adding a vertical-align: middle; without the desired result.

https://primrose-beige-fej3.squarespace.com/

password: ReinholdFinancial

Add to Design > Custom CSS

.header-actions::after {
    background-position: center;
}

@tuanphan Thank you very much!

Hi Everyone,

Super helpful thread!

I've gone through each step and managed most of it, however there's some edits i'd like to do if it's possible:

1. On the desktop view, i'd like to move the call to action button.

2. On the mobile menu, i'd like the second logo at the bottom, and the rest of the menu moved up to allow the space.

3. Also, i'm using a plugin for an alternative header and footer on the /towing page - i'm not sure if anyone here can help me to alternate the secondary logo on this page to switch it to the other logo?

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

PW: GSR123

Thanks in advance, very appreciated.

@tuanphan I'm replying through this thread, please see above comment which shows what i'm trying to do. 
Additionally, I'd like to match the size of the image to the size of the header logo if this is possible too?
Thanks in advance.

On 3/2/2023 at 3:40 AM, kellicox90 said:

Hi Everyone,

Super helpful thread!

I've gone through each step and managed most of it, however there's some edits i'd like to do if it's possible:

1. On the desktop view, i'd like to move the call to action button.

2. On the mobile menu, i'd like the second logo at the bottom, and the rest of the menu moved up to allow the space.

3. Also, i'm using a plugin for an alternative header and footer on the /towing page - i'm not sure if anyone here can help me to alternate the secondary logo on this page to switch it to the other logo?

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

PW: GSR123

Thanks in advance, very appreciated.

#1. You mean move phone button in Line 2, under "Home" item?

#2. Logo will be clickable or non-clickable?

#3. Change this logo to another image?

#1. yes move phone button into second line under navigation (centred if possible).

#2. Clickable if possible

#3. Yes, just on the /towing page I have used Will Myers plugin to use an alternative header just for this page, so i'd like to switch to the "smash repair" logo on this page only

#4 Is it possible to match the sizing of the image to the size of the header logo? 

Thank you so much @tuanphan

On 3/6/2023 at 10:04 AM, kellicox90 said:

#1. yes move phone button into second line under navigation (centred if possible).

#2. Clickable if possible

#3. Yes, just on the /towing page I have used Will Myers plugin to use an alternative header just for this page, so i'd like to switch to the "smash repair" logo on this page only

#4 Is it possible to match the sizing of the image to the size of the header logo? 

 

Thank you so much @tuanphan

#1. Add to Last Line in Code Injection > Footer

<script>
  jQuery(document).ready(function($){
  $('.header-display-desktop .header-actions-action.header-actions-action--cta').appendTo('.header-nav-wrapper');
})
</script>
<style>
  .header-nav-wrapper .header-actions-action a {
    color: white !important;
}
</style>

#2. You need to add #1 code first, then I can test code for this easier

#3. Add this code to Towing Page Header

<style>
  a.second-logo img {
    content: url(https://cdn.pixabay.com/photo/2023/03/04/06/40/insect-7829003_1280.jpg);
}
</style>

#4. Add to Design > Custom CSS
 

/* second logo */
a.second-logo img {
    max-width: unset !important;
    max-height: 133px;
}

@tuanphan Thank you so much these codes are great! Are you able to help with the second logo showing in the mobile menu? And to also make it work the same on the /towing page, where the logos have switched, i'd still like to see the relative second logo on the mobile menu for this page too?

Thanks again

On 3/15/2023 at 9:43 AM, kellicox90 said:

@tuanphan Thank you so much these codes are great! Are you able to help with the second logo showing in the mobile menu? And to also make it work the same on the /towing page, where the logos have switched, i'd still like to see the relative second logo on the mobile menu for this page too?

Thanks again

Add to Last Line in Code Injection > Footer

<script>
  $(document).ready(function(){
    $('<a class="second-logo" href="/towing"><img src="https://static1.squarespace.com/static/63eda03c95851863e7f659d3/t/6405525a8c1a7f5443d20644/1678070363999/2GDTS-Logo-01.png"></a>').insertAfter('[data-folder="root"]>div>div:last-child');
});
</script>

@tuanphan Is this possible for 7.0? I need to add a sub brand logo to the header nav bar and link to their site. 

On 5/4/2023 at 3:02 AM, GeraldineT said:

@tuanphan Is this possible for 7.0? I need to add a sub brand logo to the header nav bar and link to their site. 

Yes possible. But each template in 7.0 will require a different code, so if you share site url, we can adjust code easier

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.

 

I also need to add a secondary logo to the header but how do I create a background URL for the logo image?

On 6/8/2023 at 4:19 PM, amymiskelly2610 said:

I also need to add a secondary logo to the header but how do I create a background URL for the logo image?

Suppose the image name is: mountain.png

and your domain is: amy.squarespace.com

You can follow this guide to upload image

https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files

When you've uploaded it, the image url will be: https://amy.squarespace.com/s/mountain.png

Currently moving my 7.0 site over to 7.1.

I used to use the following code in 7.0 to change the blye logo for a white logo for header sections with a background image and then use the blue logo on all other pages which have a white background.

<script>
$(function(){
$('.Header--overlay:has(.Header-branding)').find('img').attr('src', 'https://static1.squarespace.com/static/5b7b249875f9ee0623f67236/t/5d3a2f0c224e0e000168e317/1564094220249/ZP+Logo+White+Crop.png')})
</script>

I would like to do the same thing on my 7.1 site but can't find any code similar to this anywhere.

The new site is available here  https://www.pacificpoweredparagliding.com/

Pass: Gofly

Thanks for the help

On 7/15/2023 at 4:27 AM, bsilli said:

Currently moving my 7.0 site over to 7.1.

I used to use the following code in 7.0 to change the blye logo for a white logo for header sections with a background image and then use the blue logo on all other pages which have a white background.

<script>
$(function(){
$('.Header--overlay:has(.Header-branding)').find('img').attr('src', 'https://static1.squarespace.com/static/5b7b249875f9ee0623f67236/t/5d3a2f0c224e0e000168e317/1564094220249/ZP+Logo+White+Crop.png')})
</script>

I would like to do the same thing on my 7.1 site but can't find any code similar to this anywhere.

The new site is available here  https://www.pacificpoweredparagliding.com/

Pass: Gofly

Thanks for the help

 

You mean change logo to new version on homepage, and other pages will use current logo?

On 7/18/2023 at 1:51 AM, tuanphan said:

You mean change logo to new version on homepage, and other pages will use current logo?

I mean, when the page has an image as a background behind the menu which includes the homepage but also many other pages I would like the logo to show in white and when the menu has a white background, such as blog post pages, checkout pages etc, I would like the green logo to show. I was hoping to use code where i didn't have to repeat the same code on every page where i wanted to replace the logo.

Could someone tell me why the two logos works on the desktop navigation, but not on mobile?

I want to have two images in the mobile navigation. I've managed to put the image in the header navigation on desktop, but it's not visible on mobile, as shown below. I'd like the logo to the left, and "gas safe logo" on the right with the hamburger menu still central underneath.

On 11/6/2023 at 7:28 PM, Ellagrace said:

Could someone tell me why the two logos works on the desktop navigation, but not on mobile?

I want to have two images in the mobile navigation. I've managed to put the image in the header navigation on desktop, but it's not visible on mobile, as shown below. I'd like the logo to the left, and "gas safe logo" on the right with the hamburger menu still central underneath.

What is site url? We can check easier

Hi, Can anyone help me with this logo positioning. On desktop would like the 'Trigger' Logo to be much small, about 150px width.

Then on mobile would like the 'Ground' Logo to be centered and the trigger Logo to be bigger.


https://drum-dachshund-bk48.squarespace.com/
PW: GROUND

Thanks In advance.



Code is currently,

<style>
  
.header-title-nav-wrapper::before {
  content:'';
  display:block;
  width:10px;
  height:110px;
 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:100%;
width: 50% !important;
 }
</style>

@pigonpie

change background-size to contain:

background-size: contain;

Amazing, thanks @nick_sh

Any help on getting the mobile version so the Logo sits in the middle and the trigger logo is bigger?

Code:

 

<style>
  
.header-title-nav-wrapper::before {
  content:'';
  display:block;
  width:10px;
  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>

@pigonpie you have too much of space in the image, try reducing it and play with width/height