[Bill KParticipant]

Hello,
I’d like to re-create the Rev Slider down arrow button on my home page on a normal row/container.

The row uses a video bgd, so I essentially want it to behave like the Integrity 1 demo– but I don’t want to use Rev Slider.

I thought I could use the down arrow circle icon, size it up, center it, and add a link to the next div on the page. But I can’t figure out how to just put in an icon on a text module. Any help?

http://707.8a1.myftpupload.com/

[ChristopherModerator]

Hi there,

Please add the following JS code under Customize -> Custom -> Java Script:

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

Now add

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

In text part of you editor.
In href add content band id you wish as you click the arrows take you there.

Hope it helps.

[Bill KParticipant]

Almost!

The function works great. But the look isn’t quite there yet.

It needs to be lower/separated from the last line more– right at the bottom edge of the row (I even have an 8% gap between the text above and the new href text you gave me). And the carat/angle down should be inside the circle right? Or maybe even better in this case, no circle at all and just have the angle down.

See it here: http://707.8a1.myftpupload.com/

thx!

[ChristopherModerator]

Hi there,

Please add the following CSS code under Customize -> Custom -> CSS:

.x-content-band a.x-slider-scroll-bottom.above.bottom.center {
border-color: transparent;
}

And change arrow code inside your content band to this code to remove <br /> tag.
<a href="#x-content-band-2" class="x-slider-scroll-bottom above bottom center"><i class="x-icon-angle-down"></i></a>

Thank you.

[Bill KParticipant]

cool. So let’s see if I got this straight–

the JS adds the function to animate down to the desired row, less the height of the header.

the CSS hides the circle that the JS adds

the arrow code puts the down arrow icon there

So that leaves me with one more issue and two questions–

— the button now has a red hover– what I would like instead is to pickup the same hover color as the rest of my text links/social links (relative, not absolute)
— is there no way to get that same look as the Rev slider button with the arrow _inside_ the circle?
— in lieu of that, how would I change the size of the down arrow icon?

And finally–
when I removed the line breaks on the arrow text code, the code would disappear. That is, I would copy your code, paste it, save, close the box. Open the box again, and the text was gone (on the text tab not the visual). So I left the breaks in there. What is that all about?

[Paul RModerator]

Hi Bill,

Yes those are correct.

To change hover color and adjust size, you can add this under Custom > CSS in the Customizer.

/* hover color */
.x-slider-scroll-bottom:hover {
	color:#507daa;
}

/* size of arrow down */
.x-slider-scroll-bottom {
	font-size:55px;
}

Change 55px to achieve your desired size.

Please remove size:150; in your style field.

Then to make it appear inside a circle, remove the code given above that reads.

.x-content-band a.x-slider-scroll-bottom.above.bottom.center {
border-color: transparent;
}

With regards to line breaks, you need to remove it to make the arrow go inside the circle instead of outside.

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

If the arrow disappears although the code is correct, you can leave it for a while for us to check why it disappears.

Hope that helps. 🙂

[Bill KParticipant]

thx– but the case of the disappearing code still remains a mystery.

when I paste that code into the text editor, and save, and re-open the text editor, the code is gone.

I did a screen recording so you could see what I see:
https://www.dropbox.com/s/itrncnrtc24dw7f/disappearing%20code.mp4?dl=0

With the line breaks in there, no problem. Weird.

[Bill KParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi Bill,

Upon testing, it seems the <i></i> tag doesn’t work in WordPress editor. So instead of that code, please use following:

<a class="x-slider-scroll-bottom above bottom center" href="#x-content-band-2">[icon type="angle-down"]</a>

Hope this helps. 🙂

Thank you.

[theyoungrensParticipant]

@ThemeCo – is there an easier way to do this now?

[JadeModerator]

Hi there,

This should be easier to implement now especially if you will use the button element available in Cornerstone to link/navigate to a specific section.

All you have to do is add an ID to the section using the ID field in Cornerstone section. Then add a link to the button in the field href.

For example, if the ID you have added to the section is my-section, the link of the button you have to add should be #my-section.

Hope this helps.

[Author]

Posts