Add Button to Front Page header image

I would like to add a call to action button on my front page header image. I tried following the steps here: Add another call to action button, and replaced the snippet with:

But the button did not appear. Also, I would like the button to hyperlink to: https://staging.visitlongbranch.org/visit/

Thanks for your help!

Hello there,

Try doing the below steps, please.

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

      var headerImg = $('.header-image');
      var ctaBtn        = '<div class="slide-inner">'+
                          '<a href="#primary" class="roll-button button-slider">Click to begin</a>'+
                          '</div>';

      if ( headerImg.is(':visible') ) {
        headerImg.append(ctaBtn);
      }  

    });
  1. Update
  2. Add this CSS code to Appearance > Customize > Additional CSS from dashboard.
    .header-image .slide-inner{
      top: 50%;
      -webkit-transform: translateY(-10%);
      -moz-transform: translateY(-10%);
      -ms-transform: translateY(-10%);
      -o-transform: translateY(-10%);
      transform: translateY(-10%);
    }

Regards,
Kharis

Hi Kharis,

I followed your instructions, but the button does not appear. Thoughts?

Is this the site where the code be applied in?

https://staging.visitlongbranch.org/

Try clearing any applied cache, as it usually prevents recent code addition to take immediate effect. https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

Regards,
Kharis