Docs

[sirnarcis]

Hello,

I have added an arrow navigation in the slider banner:

Homepage

The arrow doesn’t work. And also smooth scroll doesn’t work.

I have added the JS script:
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’);
});
});

I have changed # with the same name I added where I want to scroll to

[Paul R]

Hi,

You can try this code instead

jQuery(function($) {

  //
  // Slider below.
  //

  $('.home .x-slider-scroll-bottom').on('touchstart click', function(e) {

    e.preventDefault();

    var mastheadHeight       = $('.masthead').outerHeight();
    var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight();
    var sliderAboveHeight    = $('.x-slider-container.above').outerHeight();
    var sliderBelowHeight    = $('.x-slider-container.below').outerHeight();
    var heightSum            = mastheadHeight + sliderAboveHeight + sliderBelowHeight - navbarFixedTopHeight;

    $('html, body').animate({
      scrollTop: heightSum
    }, 850, 'easeInOutExpo');

  });

});

Hope that helps.

[sirnarcis]

It didn’t.

It doesn’t scroll at all now. Do I need to name something in the js to make it scroll to the ?

Also the arrow still not showing, only the round border.

Thanks,
Narcis

[Nabeel A]

Hi there,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[sirnarcis]

This reply has been marked as private.

[Rahul]

Hey There?

Thanks for writing back!

Upgrading your x theme and its plugins should fix the problem. (We could see 21 updates on your site. Kindly update the Theme and Plugins to their respective latest versions).

Let us know how it goes!

[sirnarcis]

Still not working. I’m going to recap what I have done. Still doesn’t show the arrow icon neither scrolls.

I have added the HTML for the arrow on the slider:

<div style=”margin-top:85px”>
<i class=”x-icon-angle-down”></i>
</div>

Then this html where I want to scroll:

<div style=”margin-top: 20px; color: #eb6909; font-weight: bold; line-height: 100%;”>

and the JS you suggested:
jQuery(function($) {

//
// Slider below.
//

$(‘.home .x-slider-scroll-bottom’).on(‘touchstart click’, function(e) {

e.preventDefault();

var mastheadHeight = $(‘.masthead’).outerHeight();
var navbarFixedTopHeight = $(‘.x-navbar-fixed-top-active .x-navbar’).outerHeight();
var sliderAboveHeight = $(‘.x-slider-container.above’).outerHeight();
var sliderBelowHeight = $(‘.x-slider-container.below’).outerHeight();
var heightSum = mastheadHeight + sliderAboveHeight + sliderBelowHeight – navbarFixedTopHeight;

$(‘html, body’).animate({
scrollTop: heightSum
}, 850, ‘easeInOutExpo’);

});

});

[Paul R]

Hi,

I was able to fix it by changing the code to this.

<div style="margin-top:85px"><a href="#assure" class="x-slider-scroll-bottom bottom center"><i class="x-icon-angle-down" 
data-x-icon=""></i>
</a></div>

Kindly check n your end.

Thanks

[sirnarcis]

Thanks that actually works!

Can I ask one last request? I can’t seem to understand how could I actually make that arrow to be on the right hanside in the bottom, and that scrolls down.

I miss understood my client. See below photoshop image to understand what I’m after.

Thanks,
Narcis

[Christopher]

Hi there,

Please add text element and insert following code :

<div style="margin-top:85px"><a href="#assure" class="x-slider-scroll-bottom bottom right"><i class="x-icon-angle-down" 
data-x-icon=""></i>
</a></div>

Hope it helps.

[sirnarcis]

It didn’t work. 🙁

And by adding the text element has added some space and now I can’t click to edit on the text element 🙁

I have added it after the 4 boxes.

Where do I add the text element?

[Christopher]

Hi there,

Please update your code to :

<div style="margin-top: 20px;color: red;position: relative;top: 33px;bottom: 0;left: 21%;"><a href="#assure" class="x-slider-scroll-bottom bottom right" style="color: red;"><i class="x-icon-angle-down" data-x-icon=""></i><br>
</a></div>

Instead of assure add next section’s id.

The code gives you result like attachment.

Hope it helps.

[sirnarcis]

I’m sorry but I’m not managing!

Nothing appears on the screen and the section adds a space below only. 🙁

[Paul R]

Hi,

I went ahead and added it.

Please check your homepage.

Thanks

[Author]

Posts