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

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


Question

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?

 

Link to comment
  • Answers 10
  • Created
  • Last Reply

Top Posters For This Question

10 answers to this question

Recommended Posts

  • 0
On 8/5/2021 at 4:18 PM, aptumkommunikasjon said:

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 🙂

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>

 

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

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

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

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
22 hours ago, aptumkommunikasjon said:

Business Plan.

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

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

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

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

 

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

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...