JQuery Script not running on all pages

Hi I have embedded a script to show a down arrow on the slider which indicates to read more. Runs fine on the homepage and contact page, shows as a broken icon on some pages and also doesn’t show at all on others.
Plugins have been disabled to rule out plugin conflicts and the issues remained. Header and footer text checked and appears on all pages.

Plugin used - Insert Headers & Footers
Script in header:

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

Script in footer:

    <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>

Additional CSS using CSS editor within Elementor:

    .site-header {
      background-color: rgba(255,255,255,0.6);
    }

    @-webkit-keyframes bounce {
    	0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}	40% {-webkit-transform: translateY(-30px);}
    	60% {-webkit-transform: translateY(-15px);}
    }

    @-moz-keyframes bounce {
    	0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
    	40% {-moz-transform: translateY(-30px);}
    	60% {-moz-transform: translateY(-15px);}
    }

    @-o-keyframes bounce {
    	0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
    	40% {-o-transform: translateY(-30px);}
    	60% {-o-transform: translateY(-15px);}
    }
    @keyframes bounce {
    	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    	40% {transform: translateY(-30px);}
    	60% {transform: translateY(-15px);}
    }

    .scroll-down-arrow{
      -webkit-animation-name: bounce;
      -moz-animation-name: bounce;
      -o-animation-name: bounce;
      animation-name: bounce;

      -webkit-animation-fill-mode:both;
      -moz-animation-fill-mode:both;
      -ms-animation-fill-mode:both;
      -o-animation-fill-mode:both;

      animation-iteration-count: infinite;
      -moz-animation-iteration-count: infinite;
      -webkit-animation-iteration-count: infinite;

      animation-fill-mode:both;
      -webkit-animation-duration:2s;
      -moz-animation-duration:2s;
      -ms-animation-duration:2s;
      -o-animation-duration:2s;
      animation-duration:2s;
    }

Example of site working: https://www.csp.partners/
Example of site not working: https://www.csp.partners/cyber-security-services/

Any help appreciated.
Leanne.

Hi Leanne,

Thank you for contacting us about our theme Sydney. I am happy to help!

I checked your services page and didn’t see the issue – everything looks good to me.

Can you take a screen recording or screenshot of it to point me to the exact location of the error? Or maybe it is only happening on your end due to web browser’s specific issue? Please try:

  1. Updating your web browser
  2. Clear cache, cookie, and history
  3. Restart it and visit your page

Let me know your views.

Stay safe.
Have an excellent day :slight_smile:

Regards,
Kharis
aThemes Support

Hi there,

Thanks ever so much for the quick response.

I have cleared the cache on my laptop and mobile devices and the same issue is occuring on both. I have also purged the site cache via WP Optimise (also disabled the plugin in case that was the problem) and experiencing the same results.

Client side is also seeing the same things. I cannot attach a video of some of the pages which show it both working and not. Also cannot provide more than one image of the screenshots…

Thanks again,
Take care
Leanne

Hi Leanne,

Can you take a screenshot of where you put the code into? Just to make sure it is properly placed.

Stay safe.
Have an excellent day :slight_smile:

Regards,
Kharis
aThemes Support