Jump to content

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

Recommended Posts

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!

Edited by LakeDogRealty
Initial Revision
Link to comment

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

screenshot-1.png.219452dd2a657cce7cee9f2f90dc02f0.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
  • 9 months later...
  • 8 months later...
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. 

image.png

What is site password

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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

image.png.8595a7b511c204540d20c8057db3c176.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 2 weeks later...

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 

 

 

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...

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

Link to comment
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? 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 8 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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?

here.thumb.png.c82766b48dae279f7d4452cf8d6cb7ac.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 weeks later...
  • 7 months later...
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>

 

Edited by tuanphan
forgot href link

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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!

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.