Add icon under button on home page

Hi there,

We recently conducted usability testing on our test site using the Astrid theme. dev.seattleaa.org. Testing revealed that 8/8 participants did not realize there was additional content on the home page under the fold. I know, I know it’s 2018, but I think it’s due to where the dark overlay and the image cuts off at the fold in chrome and in Safari.

We want to add a chevron icon under the homepage button to help users understand there is more content below the image. How would I go about adding that?

Thanks for your help!
Gail

Hello Gail,

To accomplish it, try doing 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
    jQuery(function($) {

      if( $('.site-header').hasClass('has-header') && $('.header-info').length ) {

        var mainHeader    = $('.header-info .container');
        var scrollArrow   = '<span class="scroll-down-arrow"><i class="fa fa-angle-down"></i></span>';

        mainHeader.append(scrollArrow);

      }

    });
  1. Update
  2. Add this CSS code to Appearance > Customize > Additional CSS from dashboard.
    .scroll-down-arrow{
      position: absolute;
      bottom: -80px;
      left: 0;
      z-index: 5;
      font-size: 40px;
      color: #fff;
      display: block;
      width: 100%;
      text-align: center;
    }

Regards,
Kharis

That worked! Thanks for your help Kharis.

You’re welcome!

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