Is there a way to link the Services icons instead of just the title?

claxtonconsulting.ca

Is there a way to be able to click on each of the services icons, and have it link to each individual services page, instead of just the service title?

Hello there,

Thank you for asking.

In order to achieve that objective, could you please try to do the following?

  1. Install and activate the Header and Footer Scripts plugin
  2. Go To Settings > Header and Footer Scripts panel
  3. Paste the following code into the provided Scripts in footer box
<script>

(function($){

    "use strict";

    var aElem = $('.service-area .service');

    aElem.each(function(){

        var url = $(this).find('a').attr('href');
        var icon = $(this).find('.service-icon-svg');

        icon.wrap('');
        
    });
  

})(jQuery);

</script>
  1. Save settings

You would need to clear your browser’s cache before reloading your site.

Let me know how it goes.

Regards,
Kharis

It didn’t work :frowning:

http://claxtonconsulting.ca/our-services/

Hello there,

Thank you for updating me.

Apologies a line of the code I previously suggested was stripped. Remove the code you entered, then paste the following:


<script>

(function($){

    "use strict";

    var aElem = $('.service-area .service');

    aElem.each(function(){

        var url = $(this).find('a').attr('href');
        var icon = $(this).find('.service-icon-svg');

        icon.wrap('<a href="'+url+'"></a>');
        
    });
  

})(jQuery);

</script>

Try to clear your browser’s cache before reloading your site.

Let me know how it goes.

Regards,
Kharis

It worked!!! Thank you!!!