Docs

[Leanna]

I want to create the scroll-down icon in the middle of the page like in http://demo.theme.co/integrity-1/ or like https://pencilsofpromise.org. I am NOT using Rev Slider as I believe it slows down my site. It seems that an icon could be coded into a section and row that overlapps the section above, which I know how to do, but how to get specifically thsi nice looking icon and how to get it to gently scroll down a little… I struggled with several threads but nothing has worked yet. Please advise.
http://www.leannacinquanta.com

[Leanna]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in! The given password is invalid.

I would like you to check out this topic here:
https://community.theme.co/forums/topic/down-angle-navigation-arrow/

You need to need to insert raw content element and use this custom html code:

<a href="#" class="x-slider-scroll-bottom smooth-scroll bottom center">
  <i class="x-icon-angle-down"></i>
</a>

And then you also need to add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

jQuery(function($){
  $('.smooth-scroll').click(function(e){
    e.preventDefault();
   
    $('html,body').animate({
      scrollTop: $('#' + $(this).attr('href').split("#").slice(-1)[0] ).offset().top - $('.x-navbar').height()
    },700 ,'swing');
  });
});

Hope this helps. Kindly let us know.

[Leanna]

After applying the above code, the icon shows up in Chrome but doesn’t go anywhere, and the icon does not show up in Firefox or IE. I ended up putting it on a different site, giving you that login below:

[Leanna]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for the updates! It doesn’t go anywhere because you haven’t supplied the section id as the href of the icon. This will tell the button that after you click it, it will go to that section. I have edited your page and added an mssn-stmt ID of the next section where the icon is located. I also edited the icon and used this code:

<a href="#mssn-stmt" class="x-slider-scroll-bottom smooth-scroll bottom center">
  <i class="x-icon-angle-down"></i>
</a>

Please check your site now.

[Leanna]

Duu! Ok I got it. Thanks!

[Thai]

If you need anything else please let us know.

[Author]

Posts