Downward pointer on slider

Love the fullscreen slider, but is there an easy way to add a downward arrow or similar to indicate that there is more content below the fold?

Thanks!

1 Like

Hello there,

Thank you for getting in touch here.

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

  1. Install and activate the Header and Footer Scripts plugin. Go to Settings > Header and Footer Scripts.

  2. Paste the following to the “Scripts in header:” box


<style>
.scroll-down-arrow{
  position: absolute;
  bottom: 10px;
  left: 0;
  z-index: 5;
  font-size: 40px;
  display: block;
  width: 100%;
  text-align: center;
}

</style>

  1. Paste the following code into the provided “Scripts in footer:” box

<script>
jQuery(function($) {

  var mainSlide     = $('.header-slider');
  var scrollArrow   = '<a class="scroll-down-arrow" href="#primary"><i class="fa fa-angle-down"></i></a>';

  if ( mainSlide.length ) {
    mainSlide.append(scrollArrow);
  } 

});
</script>

  1. Save settings

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis

1 Like

This did the trick. Thanks!

You’re always welcome here.

I am marking this thread as resolved. 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

That worked perfectly in Chrome, but It didn’t appear to work in either Fire Fox or Internet Explorer. Any ideas or suggestions? - Never Mind. It was Cached.

Hello there,

What versions of FF and IE are you running? Are they the latest ones? Please share a link to your site, so I can have a look.

Regards,
Kharis