lottydotty Posted March 10, 2023 Share Posted March 10, 2023 (edited) 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> Edited March 11, 2023 by lottydotty Link to comment
lottydotty Posted March 10, 2023 Share Posted March 10, 2023 @tuanphan I have a strong feeling that you'll know what to do 🙂 Link to comment
tuanphan Posted March 12, 2023 Share Posted March 12, 2023 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
lottydotty Posted March 13, 2023 Share Posted March 13, 2023 (edited) @tuanphanIt's https://www.districtstrong.org/ and the left-hand side of the logo is supposed to go to https://www.federalcitycouncil.org/ Edited March 13, 2023 by lottydotty Link to comment
tuanphan Posted March 16, 2023 Share Posted March 16, 2023 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
lottydotty Posted March 17, 2023 Share Posted March 17, 2023 @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! tuanphan 1 Link to comment
Trawww Posted April 24, 2023 Share Posted April 24, 2023 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> Link to comment
tuanphan Posted April 25, 2023 Share Posted April 25, 2023 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Trawww Posted April 25, 2023 Share Posted April 25, 2023 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 Link to comment
tuanphan Posted April 26, 2023 Share Posted April 26, 2023 20 hours ago, tuanphan said: What is site url? Menu 2, too many items, not enough space. You try remove some items Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
AmoryLujo Posted February 14 Share Posted February 14 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 Link to comment
alihaz89 Posted February 26 Share Posted February 26 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! Link to comment
tuanphan Posted February 29 Share Posted February 29 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
alihaz89 Posted February 29 Share Posted February 29 It works great! Thank you so much @tuanphan I really appreciate it! tuanphan 1 Link to comment
alihaz89 Posted June 19 Share Posted June 19 Hi again! @tuanphan. I'm scratching my head with another question that is fairly similar. Would this code also work to switch the link for social icons? On this page: https://www.bliss-hotel.net/home-mahe I have the IG linked to @blisshotelseychelles and the email blissresa@bliss-hotel.net. And on this page https://www.bliss-hotel.net/home-riad-marrakech I would like the IG to point to @riadblisshotelmarrakech and email to info@bliss-riad.com. Is it possible with a similar code as you mentioned above? Thank you! Link to comment
tuanphan Posted June 21 Share Posted June 21 On 6/19/2024 at 11:44 PM, alihaz89 said: Hi again! @tuanphan. I'm scratching my head with another question that is fairly similar. Would this code also work to switch the link for social icons? On this page: https://www.bliss-hotel.net/home-mahe I have the IG linked to @blisshotelseychelles and the email blissresa@bliss-hotel.net. And on this page https://www.bliss-hotel.net/home-riad-marrakech I would like the IG to point to @riadblisshotelmarrakech and email to info@bliss-riad.com. Is it possible with a similar code as you mentioned above? Thank you! Use this code for both <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'); $('header#header a.icon[href*="instagram"]').attr('href','https://www.instagram.com/riadblisshotelmarrakech'); $('header#header a.icon[href*="mailto"]').attr('href','mailto:info@bliss-riad.com'); }); </script> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
alihaz89 Posted June 21 Share Posted June 21 Brilliant! It works great, thank you so much! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment