Change Navigation Logo Image Link For Mobile Devices

Hello,
My client has a 'splash' page for their site: https://www.agonyecstasygallery.com/

I would like the site's main navigation logo (top left) to link to this page: https://www.agonyecstasygallery.com/01-home
instead of the 'splash' page (which is set as the homepage as we need it to be the first page people 'land' on when they type in the url) on both mobile and desktop.

Following this amazingly helpful thread (thanks to all involved!), I used this code in the site-wide footer code injection: 

<-- Redirect Site Title Logo -->
<script>
  document.querySelector('.header-title-logo a, .header-mobile-logo a').setAttribute('href', '/01-home');
</script>

and it worked perfectly for desktop, but not for mobile.

Can anyone help?

Thanks so much!

Emma

@Emma_23 Hi Emma! You can remove your existing code and replace it with the following to ensure it affects both the desktop and mobile versions:

<script>
document.addEventListener('DOMContentLoaded', function () {
  var headerLogoLink = document.querySelector('.header-title-logo a');
  
  if (headerLogoLink) {
    headerLogoLink.href = 'https://www.agonyecstasygallery.com/01-home';
  }
});  
</script>

Hi Lesum!

Thanks so much for your reply.

I removed the previous code and added the code above to the site-wide footer code injection. Like the last code I tried, it works perfectly for desktop but still not for mobile.

Do you think perhaps I have some code in the css blocking your code from working?

Thank you 🙂

Emma

 

On 8/8/2024 at 8:26 PM, Emma_23 said:

Hi Lesum!

Thanks so much for your reply.

I removed the previous code and added the code above to the site-wide footer code injection. Like the last code I tried, it works perfectly for desktop but still not for mobile.

Do you think perhaps I have some code in the css blocking your code from working?

Thank you 🙂

Emma

 

You can change this line

 var headerLogoLink = document.querySelector('.header-title-logo a');

to this

 var headerLogoLink = document.querySelector('.header-title a');

Hi @tuanphan
Thanks so much for taking the time to reply (I am a big fan of your work!).

Unfortunately, the same thing happened: the code amended according to your suggestion above, works perfectly for desktop but doesn't work on my site for mobile.

Is there anything else I can try? I also tried the code you suggested in the other thread and it's the same. I am wondering if perhaps I have some css code blocking your code from working on mobile?

Thank you again for your time.

Best wishes,
Emma



 

Hi @tuanphan
Brilliant! This worked perfectly for both desktop and mobile on my site! Thank you so much for your help.

In case it's useful for others, this code, from Elise Barnes at Websites By Elise also worked for me:

<script>
  $(document).ready(function(){
    document.querySelector('.header-display-desktop .header-title a').setAttribute('href', '/01-home');
    document.querySelector('.header-display-mobile .header-title a').setAttribute('href', '/01-home');
  });
</script>

Thanks again,
Emma