How can I put two logos in my header on either side of navigation links?

I am somewhat of a novice in Squarespace and am attempting to make substantial changes to my site. We are a realty company with two companies in our one office: Lake Dog Realty, LLC for lake properties and Realty Experts of Alabama, LLC for our off-lake properties. I need to be able to put both companies on one site for several reasons (our agents overlap between the companies; our homes overlap, etc.). The site was created with the URL www.lakedogrealty.com. I have other URLS, such as www.realtyexpertsal.com, directed to the homepage of www.lakedogrealty.com. I would like to have Lake Dog's logo on the left as it already is and add the Realty Experts of Alabama on the right. The logos look the same (colors, oval, size, etc.), except the dog mascot has a life preserver on the lake company and a business suit and tie for the realty experts one. Can someone please help?! I am willing to pay. I am also open to suggestions for other ways to do this. I considered two "landing" pages depending on the URL but then I think I still need the header to have both company logos with the naviation tabs all the same for all the pages. I am in the predicament of not knowing what I don't know. Plus, I don't know how the changes will affect viewing on mobile devices. Thank you!

@LakeDogRealty Take some time to think.

Want to do so?

There will be 2 methods

Method 1. Can you add an item to the Navigation, with the link as the homepage?If you can do it, it will be better, I will insert a logo as the background of that item.

Method 2. If you cannot add items to the Navigation, I can still insert the logo on the right.

However, the logo will not have a link, ie you cannot click on right logo

@LakeDogRealty

How do you have a different logo on the right side when you have one on the left?

You can add blank item in navigation first, then url, we can use CSS background image, like this site.

Site URL: https://cow-mouse-sjr3.squarespace.com/config/

Im trying to add two images to the header. One to the left which will be an image and one in the center which will be a text image. The toolbar will also be centered below the first image. Is there a code for this? See image attached for reference. 

7 hours ago, LizAD said:

Site URL: https://cow-mouse-sjr3.squarespace.com/config/

Im trying to add two images to the header. One to the left which will be an image and one in the center which will be a text image. The toolbar will also be centered below the first image. Is there a code for this? See image attached for reference. 

What is site password

You can change this header layout on desktop and use css to insert left logo

Site URL: http://www.informedinvestments.co.uk

Hi

I have a company logo which I need on my site, but also the logo for the professional body which I am a member of. This is super important as it demonstrates my credibility to potential clients.

Is it possible to get both logos on some of my website pages ? Presently I can only see a way of having one on each page. Please bear in mind that I have absolutely zero experience in coding or website building and am simply working this out using the templates and simple editing boxes which pop up. If coding is the only solution, then I guess i'm at a dead end .

Many thanks 

Hi. Yes possible. The url doesn't work. Can you check url?

did this get answered? where do you find the css for this?

On 5/13/2021 at 7:06 AM, nathanielspawpals said:

did this get answered? where do you find the css for this?

Can you share site url? We can help easier

Hi @tuanphan I am currently attempting the same for a client: an image logo to the left of navigation and a site title font logo to the right. Would you mind explaining how to do this? I don't quite understand your methods 1 and 2 above. Am not sure what you mean by adding a blank item in navigation.

Thank you

On 5/25/2021 at 2:55 AM, AC101 said:

Hi @tuanphan I am currently attempting the same for a client: an image logo to the left of navigation and a site title font logo to the right. Would you mind explaining how to do this? I don't quite understand your methods 1 and 2 above. Am not sure what you mean by adding a blank item in navigation.

Thank you

Can you share link to your site? Do you use Personal, Business or COmmerce Plan? 

I'm looking to do the exact same thing for a clients website. Are you able to share the CSS for this? 

Many thanks

18 hours ago, Pinklady said:

I'm looking to do the exact same thing for a clients website. Are you able to share the CSS for this? 

Many thanks

This require JavaScript code. If you share link to your site, we can test & give exact code

Yes, here it is https://www.imperfectly-perfect.co.uk/ I want to be able to put another logo on the left hand side. If you can help that would be amazing! Thank you 

On 1/28/2022 at 4:25 PM, Pinklady said:

Yes, here it is https://www.imperfectly-perfect.co.uk/ I want to be able to put another logo on the left hand side. If you can help that would be amazing! Thank you 

Add here? Logo is clickable or non click?

Yes thats where I want to put it. Non clickable is fine thank you 

On 2/4/2022 at 10:08 PM, Pinklady said:

Yes thats where I want to put it. Non clickable is fine thank you 

 

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('<img class="second-logo" src="https://cdn.pixabay.com/photo/2021/07/09/06/57/lavender-6398425__480.jpg"/>').insertBefore('.header-display-desktop');
	});
</script>
<style>
  img.second-logo {
    width: 100px;
}
</style>

This is great thank you! Is there a way to have it applied to desktop only? Not on mobile.

I believe I've figured it out, I added to the style

<style>
  img.second-logo {
    width: 100px;
  }
  @media (max-width: 950px){
  img.second-logo {
    display: none;
    }}
</style>

On 1/28/2022 at 4:43 PM, tuanphan said:

This require JavaScript code. If you share link to your site, we can test & give exact code

Hi Tuanphan, May I ask your help about the JavaScript code for adding a second clickable logo on the header right? next to the social icons' right.

The website link is https://www.pizmagazin.ch/. If you can help that would be amazing! Thank you!

On 11/2/2022 at 4:21 PM, caminada said:

Hi Tuanphan, May I ask your help about the JavaScript code for adding a second clickable logo on the header right? next to the social icons' right.

The website link is https://www.pizmagazin.ch/. If you can help that would be amazing! Thank you!

Add this to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('<a class="second-logo" href="https://google.com"><img src="https://cdn.pixabay.com/photo/2021/07/09/06/57/lavender-6398425__480.jpg"/></a>').appendTo('.header-display-desktop .header-actions.header-actions--right');
	});
</script>
<style>
  a.second-logo img {
    max-width: 70px;
}
a.second-logo {
    margin-left: 2.5vw;
}
</style>

On 11/4/2022 at 10:04 PM, tuanphan said:

Add this to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('<a class="second-logo" href="https://google.com"><img src="https://cdn.pixabay.com/photo/2021/07/09/06/57/lavender-6398425__480.jpg"/></a>').appendTo('.header-display-desktop .header-actions.header-actions--right');
	});
</script>
<style>
  a.second-logo img {
    max-width: 70px;
}
a.second-logo {
    margin-left: 2.5vw;
}
</style>

 

Thank you very much!