Header image clickable?


#1

Hi,

Is it possible to make the header image clickable?

Here is my site https://theothershift.com/. For example is it possible to have the man with the book on his face clickable?

Thanks so much.

Emma


#2

Hello Emma,

If I got it right, you’d want to do 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($) {

      var link = 'https://theothershift.com/';
      $('.header-image').prepend('<a href="'+link+'"></a>');

    })(jQuery);
  1. Update
  2. Add the below CSS code to Appearance > Customize > Additional CSS from dashboard.
    .header-image .overlay {
      z-index: 3;
    }

    .header-image > a {
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 5;
    }

Flush/clear any applied site caching. Otherwise, the new code addition won’t take any effect in the front end. This has been mentioned in the codex: https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

Regards,
Kharis


#3

It worked perfectly!

Thank you so much for your help.

Cheers,

Emma


#4

You’re welcome Emma!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis