Logo url redirect not working

Site URL: http://www.benpeers.com/creative

Hi all,

I want to ensure clicking on the logo within my site does not direct the user back to the splash page.

I did this by installing the following code in the header injection of each page:

Quote

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>$(document).ready(function () {
          $(".logo-image [href]").attr("href", "https://www.benpeers.com/creative");
            $(".mobile-logo-image [href]").attr("href", "https://www.benpeers.com/creative");
        });
</script>

This method seemed to work for a few days and then it stopped working.

Any help would be appreciated! :)

Thank you

21 hours ago, paul2009 said:

Your snippet of code is using an old version of jQuery that has security vulnerabilities and will slow down your site. I recommend you replace this with some plain JavaScript, which will need to be added to the Code Injection Footer.

As an example:

1. Remove the original code (above) if you have not already done so.
2. Navigate to Settings > Advanced > Code Injection.
3. Scroll down to the FOOTER injection box and then paste the following instead:

<script>
  document.querySelector('.logo-image a').setAttribute('href', '/creative');
  document.querySelector('.mobile-logo-image a').setAttribute('href', '/creative');
</script>

Let me know how you get on.

Notes
1. This is for the York family of templates on Squarespace 7.0 only
2. This will only work if the site title is an image. If the site title is text only, the selector will need to be amended.
3. The example changes the site logo's link to "/creative" instead of the default home page.
4. This solution does not require jQuery.
 

Ahh this worked an absolute treat. Thank you so much for your help! 🙏

Ben

@paul2009  using Tudor - got this working for a blog page using the insert blog header code -would you recommend changing what I have here to your solution?

<script>$(document).ready(function () {
           $(".logo-image.branding a[href]").attr("href", "/fitness-reviews");
         });
 </script>

at you laid out

Hey @so-in

In summary, if you need a small snippet of code (less than 100 lines) then it's always better to obtain one that doesn't rely on jQuery. You'll know this because it won't contain 'jquery' or '$' symbols.

Why?

It will load faster. It's safer.

Because with plain JavaScript, what you see is what you get. A single short line of code is probably less than 100 bytes in size and will take no time at all for your website to load. 

In contrast, if you use a single short line of code that is dependent on a jQuery library (you'll know this because it will contain at least one '$' symbol) then it must also load the jQuery library before it can run. That's another 7,000 lines of code* - around 90,000 bytes* - that must be loaded with your website. Of course your single line of code won't need 99% of this, but it must load it anyway.

*Estimates are used as examples. Each jQuery version is different. Older versions of jQuery may contain security vulnerabilities.