down angle navigation arrow – Themeco Community

down angle navigation arrow

edwardo0907 — Thu, 31 Jul 2014 20:08:16 +0000

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!

Reply To: down angle navigation arrow

Paula S — Fri, 01 Aug 2014 23:02:29 +0000

Hi Edwardo,

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

Hope that helps!

Reply To: down angle navigation arrow

edwardo0907 — Fri, 01 Aug 2014 23:35:29 +0000

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.

Reply To: down angle navigation arrow

edwardo0907 — Fri, 01 Aug 2014 23:42:53 +0000

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?

Reply To: down angle navigation arrow

Christian — Sun, 03 Aug 2014 05:33:04 +0000

Hey Edwardo,

The HTML for that is

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

Reply To: down angle navigation arrow

edwardo0907 — Sun, 03 Aug 2014 16:53:47 +0000

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!

Reply To: down angle navigation arrow

Christian — Mon, 04 Aug 2014 05:04:06 +0000

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

Reply To: down angle navigation arrow

edwardo0907 — Tue, 05 Aug 2014 14:22:30 +0000

YAAAAAY! Thank you very very much 🙂

Reply To: down angle navigation arrow

Zeshan — Tue, 05 Aug 2014 19:06:05 +0000

You’re most welcome Edwardo 🙂

Reply To: down angle navigation arrow

airbdesign — Fri, 11 Sep 2015 06:01:53 +0000

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

I followed the above instructions. I added the below code in a "Content band"

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!