How to add 2 clickable logos in header when left-aligned?

Site URL: https://www.pgas.no/

I would like to have two clickable logos in my header. So that the two companies in question will link to each other right from the header, and "look seamless" when changing sites. I'm in the process of making the second company's website now. It will be almost identical, but with that companys information and "reversed" logos in the header.

I have for now added one image with both the logos to the live site because they needed it public right away. It shows how I would like the end result to look like if possible. Is the best thing to do to add another image with second logo and place it next to the first one - if so what would be the code? Or is there some other way?

21 hours ago, aptumkommunikasjon said:

Site URL: https://www.pgas.no/

I would like to have two clickable logos in my header. So that the two companies in question will link to each other right from the header, and "look seamless" when changing sites. I'm in the process of making the second company's website now. It will be almost identical, but with that companys information and "reversed" logos in the header.

I have for now added one image with both the logos to the live site because they needed it public right away. It shows how I would like the end result to look like if possible. Is the best thing to do to add another image with second logo and place it next to the first one - if so what would be the code? Or is there some other way?

 

It looks like you solved? I see 2 logos left aligned here

On 7/30/2021 at 11:17 AM, tuanphan said:

It looks like you solved? I see 2 logos left aligned here

As I stated in my original post it's one combined image right now to get them both to show, and it only links to one of their pages. I need to link the second logo to another URL, therefore I thought it's best to insert another image, so I can link it to something else than the original logo.

On 8/2/2021 at 2:10 PM, aptumkommunikasjon said:

As I stated in my original post it's one combined image right now to get them both to show, and it only links to one of their pages. I need to link the second logo to another URL, therefore I thought it's best to insert another image, so I can link it to something else than the original logo.

Do you use Personal or Business Plan? We can use jQuery to add second logo, then you can add link easily

23 hours ago, tuanphan said:

Do you use Personal or Business Plan? We can use jQuery to add second logo, then you can add link easily

Business Plan.

22 hours ago, aptumkommunikasjon said:

Business Plan.

Hi. I see 2 logos can clickable here. Do you still need help?

1 hour ago, tuanphan said:

Hi. I see 2 logos can clickable here. Do you still need help?

Yes! You stated earlier that a jQuery code snippet could add the second logo/image, so I can make it clickable to a different url than the first logo/image.

My live site still has the collective image with two logos in it so they both show right now. But I would like to change this image to two separate ones - so I can link them to separate urls 🙂

On 8/8/2021 at 5:03 AM, tuanphan said:

Hi. Remove script code you are using & add new script code (your script code is missing a class name)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('<a href="https://www.pgas.no"><img src="https://images.squarespace-cdn.com/content/59a96693a803bb99a7e95f74/1538060354433-S0RNYFKCVOIPG4FIQF4Y/logo+PG+RGB_Main+White.png" class="t-img"/></a>').appendTo('[data-nc-container="top-left"]');
	});
</script>
<style>
  img.t-img {
    width: 170px;
}
</style>

 

Thank you! I've added the code you gave me, and played around with some css styles to get it to sit right on both desktop and phone. I think it looks as I want it to now!

But would it be possible to move/insert the extra logo after the main one - and not before as it is now?
So main branding (prosjektgruppen) first - and extra added logo (agder consult) second.

Probably best to change the code? And not switch the images around - so the main branding and links stay as they should.

On 8/10/2021 at 3:00 PM, aptumkommunikasjon said:

Thank you! I've added the code you gave me, and played around with some css styles to get it to sit right on both desktop and phone. I think it looks as I want it to now!

But would it be possible to move/insert the extra logo after the main one - and not before as it is now?
So main branding (prosjektgruppen) first - and extra added logo (agder consult) second.

Probably best to change the code? And not switch the images around - so the main branding and links stay as they should.

Add to Design > Custom CSS

/* change logos order */
[data-nc-container="top-left"] {
    flex-direction: row-reverse;
    justify-content: flex-end !important;
    align-items: flex-start !important;
}

9 minutes ago, tuanphan said:

Add to Design > Custom CSS

/* change logos order */
[data-nc-container="top-left"] {
    flex-direction: row-reverse;
    justify-content: flex-end !important;
    align-items: flex-start !important;
}

 

Works like a charm. Thank you for all your help!