[edwardo0907Participant]

Hi!
I want to create one of those circled down angles like on the integrity one demo header.
http://prntscr.com/489gij

Anyone know the shortcode? I can’t seem to figure it out.

Thanks!

[Paula SMember]

Hi Edwardo,

Here is the link for the icon shortcodes (http://theme.co/x/demo/integrity/1/shortcodes/icons/)

Hope that helps!

[edwardo0907Participant]

Unfortunately it doesn’t. Unless I’m mistaken, I’ve been over that list 3 times already. Twice before writing a forum post and now again as you suggested.

The one I’m looking ( http://prntscr.com/489gij )for is not there.

I found [icon type=”arrow-circle-o-down”] [icon type=”chevron-down”] [icon type=”chevron-circle-down”] but what I’m looking for http://prntscr.com/489gij is more like the cheveron circle down, but colour inverted to be like arrow-circle-o-down.

Take a look please, you’ll see it’s missing from the list.

[edwardo0907Participant]

based on the code http://prntscr.com/48nu5i in the header… (I also am confused why the headers are excluded from the demos as this would make things a lot easier) the code refers to icon-angle-down but this icon doesn’t have a circle around it. So what creates the circle?

[ChristianModerator]

Hey Edwardo,

The HTML for that is

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

The circle is because of the solid border and border radius of the anchor with the class of .x-slider-scroll-bottom.

Hope that helps. 🙂

[edwardo0907Participant]

Thank you! I’ve done this. I had to remove the line breaks in the code because otherwise it positioned the angle down outside the circle.
http://iching.ming-man.com/the-4-pillars-system/

the challenge I’m having now is that I’m referencing it to a section lower on the page. That works, but the scrolling doesn’t occur. It just jumps to that section, whereas everywhere else in the X theme demo it scrolls.

Do you know why this is happening?

In the link above, you’ll see the circle in the top section with the arrow. If you click it, it’ll jump to a lower section.

Thank you!

[ChristianModerator]

Hey Edward,

Please add the code below in the Customizer > 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');
  });
});

And, add the class “smooth-scroll” to your link.

Hope that helps. 🙂

[edwardo0907Participant]

YAAAAAY! Thank you very very much 🙂

[ZeshanMember]

You’re most welcome Edwardo 🙂

[airbdesignParticipant]

I want to add the down arrow navigation that scrolls as well.

<strong>I followed the above instructions. I added the below code in a "Content band"</strong>

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

Then added the code below via 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');
  });
});

However the down arrow is showing up separated from the circle. Above Edwardo0 mentions he removed the line breaks to fix this, however I am not clear how to do this?

Thank you in advance!

[Paul RModerator]

Hi,

Please provide us with your site url so we can take a closer look.

Thanks

[airbdesignParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for providing the access to your site. The arrow separates from the circle because there is a line break added to it. You should use this code instead:

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

Please keep in that line breaks and new lines will automatically get converted to br and p tags.
Hope this helps. Kindly let us know.

[airbdesignParticipant]

That worked, the circle and down arrow are now lined up, thanks.

Where can I change the hover color which is currently red?

Thank you

[Rue NelModerator]

Hello There,

Thanks for letting us know that it has worked for you.
To change the hover color of the scroll arrow, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

a.x-slider-scroll-bottom{
    border-color: white;
    color: white;
}

a.x-slider-scroll-bottom:hover{
    border-color: white;
    color: white;
}

Feel free to change the color. We have given both the hover and active state of the button.
Please let us know if this works out for you.

[Author]

Posts