Addindg external link to background image

Hi
I would like to add an external link to the backgroud image of the site header. is that possible?
thanks

Hello there,

Please try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    ;(function($) {

      if( $('.header-image').is(':visible') ) {

        var link = 'http://yoursite.com/page';

        $('.header-image').wrapAll('<a href="'+ link +'"></a>');

      }

    })(jQuery);
  1. Update

Regards,
Kharis

Hi
it did not work
could you please help? thanks

Please share a link to your site and keep the code remain, so I can check and correct the code.

Regards,
Kharis

Thanks a lot

cardiomiopatiaipertrofica.info

Hello there,

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    (function($){

      if( $('.header-slider').length ){

        var slideLink1 = '<a href="https://yoursite.com/link-1/"></a>';
        var slideLink2 = '<a href="https://yoursite.com/link-2/"></a>';
        var slideLink3 = '<a href="https://yoursite.com/link-3/"></a>';

        if($('.slide-item:nth-of-type(1)').length){
          $('.slide-item:nth-of-type(1)').wrapInner(slideLink1);
        }

        if($('.slide-item:nth-of-type(2)').length){
          $('.slide-item:nth-of-type(2)').wrapInner(slideLink2);
        }

        if($('.slide-item:nth-of-type(3)').length){
          $('.slide-item:nth-of-type(3)').wrapInner(slideLink3);
        }

      }

    })(jQuery);
  1. Update

Regards,
Kharis

Hi

it is still not working.

The image I need to link is the one attached

regards

Gianni

Hello there,

Instead of using CSS image background, try the below jQuery code solution that allows us appending image link to header area.

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    (function($){

      if( $('.site-header').length ) {
        var link   = 'http://yoursite.com/link';
        var imgURL = 'http://cardiomiopatiaipertrofica.info/wp-content/uploads/2018/08/toplogo1.png';
        $('.site-header .header-wrap').prepend('<a href="' + link + '"><img src="' + imgURL + '" /></a>');
      }

    })(jQuery);
  1. Update

Add the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    .site-header .header-wrap {
      position: relative;
    }

    .site-header .header-wrap > a {
      position: absolute;
      top: 0;
      left: 0;
    }

    .site-header .header-wrap > a > img {
      max-width: 500px;
    }

    .site-header.float-header .header-wrap > a > img {
      max-width: 300px;
    }

Regards,
Kharis

thanks a lot, that worked.
would it be possible to get the link to open into a new page?

gianni

You’re welcome!

To enable the link opens in a new tab/window, change this line:

$('.site-header .header-wrap').prepend('<a href="' + link + '"><img src="' + imgURL + '" /></a>');

with:

$('.site-header .header-wrap').prepend('<a href="' + link + '" target="_blank"><img src="' + imgURL + '" /></a>');

Regards,
Kharis