Change logo link version 7.1

Hey, y'all! I've successfully used the code below (where myclientswebsite.org is a replacement for the client's site).

It's been awesome. But now my client wants the main logo image (which includes both the main client logo and the microsite logo) to link to two different sites. They'd like to have the left-hand side of the image link to their main site while the right-hand side of the image will click to the microsite I'm finishing up for them. 

I was wondering if I could use an image map... something like this...

-----------------

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://images.squarespace-cdn.com/content/v1/6317838b0dc6040f32e7c8b3/6637a6e7-3969-4909-bdec-e07dc32d0396/myclientscombinedlogo.png?format=1500w" usemap="#image-map">

<map name="image-map">
    <area target="" alt="Main Website" title="Main Website" href="https://www.myclientswebsite.org" coords="315,1,1,85" shape="rect">
    <area target="" alt="Microsite" title="Microsite" href="https://www.myclientsmicrosite.org" coords="499,84,325,-1" shape="rect">
</map>

------------------

For reference... here's the code that I've been using for the simple url replacement (where myclientswebsite.org is a replacement for the client's site).

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>

<script>
$(document).ready(function() {
    $('.header-title-logo a').attr('href','https://www.myclientswebsite.org/');
});
</script>

@tuanphan I have a strong feeling that you'll know what to do 🙂

On 3/11/2023 at 5:25 AM, lottydotty said:

@tuanphan I have a strong feeling that you'll know what to do 🙂

 

What is site url?

@tuanphanIt's https://www.districtstrong.org/ and the left-hand side of the logo is supposed to go to https://www.federalcitycouncil.org/

On 3/13/2023 at 9:21 PM, lottydotty said:

@tuanphanIt's https://www.districtstrong.org/ and the left-hand side of the logo is supposed to go to https://www.federalcitycouncil.org/

You can consider using this code. It will add a second logo next to current logo, so you can add link easier

(Add to Last Line in Code Injection > Footer)

<script>
  $(document).ready(function(){
   $('<a href="https://www.federalcitycouncil.org/" class="second-logo"><img src="https://cdn.pixabay.com/photo/2022/10/04/14/27/cat-7498364_640.jpg"/></a>').appendTo('.header-title-logo');
});
</script>
<style>
  a.second-logo img {
    margin-left: 10px;
}
</style>

Replace Pixabay with new logo image url

@tuanphanthank you! I ended up making a slight adjustment to your recommendation to ensure that the first logo went to the client's main site. I chopped up the original image file into two separate images, and I'm really happy with the results.

Here's where things ended up... 

------------------

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>

<script>
  $(document).ready(function(){
    $('.header-title-logo a').attr('href','https://www.federalcitycouncil.org/');
   $('<a href="https://www.districtstrong.org/" class="second-logo"><img src="https://static1.squarespace.com/static/6317838b0dc6040f32e7c8b3/t/6414c9787a1bd341ff99b410/1679083896370/District_Strong_logo_larger.png"/></a>').appendTo('.header-title-logo');
});
</script>
<style>
  a.second-logo img {
    margin-left: 0px;
}
</style>

------------------

Thank you for your brilliant advice and feedback!

Hello,

what could be the reason that the same code works on two subpages and on the third subpage my menu is smashed. (see pictures, with and without code)

I used the following code: 
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
$(document).ready(function(){
    $(".header-title-logo a").attr("href", "hotel-2");
});
</script>

On 4/24/2023 at 3:08 PM, Trawww said:

Hello,

what could be the reason that the same code works on two subpages and on the third subpage my menu is smashed. (see pictures, with and without code)

I used the following code: 
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
$(document).ready(function(){
    $(".header-title-logo a").attr("href", "hotel-2");
});
</script>

What is site url?

33 minutes ago, tuanphan said:

Was ist eine Site-URL?

https://turbot-salamander-tjdh.squarespace.com/hotel-1

PW: HR123

/hotel-3-1, /hotel-2, /hotel-3 are working

20 hours ago, tuanphan said:

What is site url?

Menu 2, too many items, not enough space. You try remove some items

On 10/17/2021 at 12:36 AM, benny25 said:

Hi! I'm also having the same issue. Joelle's workaround is great but I was wondering if you knew how to hide 'Home' from mobile too. It's currently not working.

Or if anyone has found the trick to change the link embedded in the logo for both desktop and mobile, that'd be great. I've read almost every thread and there seems to be the same issue. I'm also trying to do a splash page but change the header logo to be benny.work/work
-------------

UPDATE: Thanks to @tuanphan once again 🙂 this code he provided in another thread seems to work for both desktop and mobile!

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.header-title-logo a').attr('href','https://beaverhero.com');
});
</script>

Worked great for me too. Mobil & Desktop (Android & Windows). Just hopping it still work on any browser and system.

Inserted the code on footer and changed "https://beaverhero.com" for mine.

Thanks benny25 for sharing and tuanphan for the help

A&L

A&L

Hi all,

I'm having a challenging time figuring out how to have my logo image link to a specific page. 

Here's the site URL:  www.bliss-hotel.net (This is the main home page) For now I've only design Bliss Mahé and Bliss Cruise. 

On this page : https://www.bliss-hotel.net/home-mahe I would like the logo to go back to the same page and not the main home page: www.bliss-hotel.net

Same with this page: https://www.bliss-hotel.net/home-cruise

Does anyone have any idea how to go about it? I've design this site and already injected a bit of code to hide menu items have different logos on certain page. If anyone knows how to link the logo image to specific pages that would be amazing! Thanks in advance for your help!

On 2/27/2024 at 1:52 AM, alihaz89 said:

Hi all,

I'm having a challenging time figuring out how to have my logo image link to a specific page. 

Here's the site URL:  www.bliss-hotel.net (This is the main home page) For now I've only design Bliss Mahé and Bliss Cruise. 

On this page : https://www.bliss-hotel.net/home-mahe I would like the logo to go back to the same page and not the main home page: www.bliss-hotel.net

Same with this page: https://www.bliss-hotel.net/home-cruise

Does anyone have any idea how to go about it? I've design this site and already injected a bit of code to hide menu items have different logos on certain page. If anyone knows how to link the logo image to specific pages that would be amazing! Thanks in advance for your help!

To change Logo URL on One Page, you can use this code to Page Header Code Injection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.header-title a').attr('href','https://google.com');
});
</script>

Replace Google with new page url

It works great! Thank you so much @tuanphan I really appreciate it!