Docs

[lessandmore]

Hello,

I coded my navbar to fade-in after scrolling down a certain amount. It works great until it gets to the 979px breakpoint where it doesn’t work anymore. Any idea on what is causing it not to show up?

Here is the link to the website: http://angeloakwp.lessandmore.com
I am using the latest versions of X and Cornerstone

Here is the jquery code I put into the home page (that’s the only place I want this to work)

(function($) {
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 700) {
$(‘.home .x-navbar’).fadeIn(500);
} else {
$(‘.home .x-navbar’).fadeOut(500);
}
});
});
})(jQuery);

(function($) {
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 700) {
$(“.home .sfm-navicon”).addClass(“on”);
$(‘.home .sfm-navicon’).addClass(‘gold’);
$(‘.home .sfm-navicon:before’).css(“background”, “#86764d”);
$(‘.home .sfm-navicon:after’).css(“background”, “#86764d”);
} else {
$(‘.home .sfm-navicon’).removeClass(‘gold’);
$(‘.home .sfm-navicon:before’).removeClass(‘gold’);
$(‘.home .sfm-navicon:after’).removeClass(‘gold’);
}
});
});
})(jQuery);

[Rad]

Hi there,

Thanks for writing in.

In tablet or mobile, your site’s menu is from SuperFly instead of the X’s menu. I checked and gold class and colors are perfectly changing as you scroll pass to 700px. Perhaps, you’re expecting to see X’s mobile menu instead of SuperFly?

Thanks!

[lessandmore]

Yeah that part of the nav is working, but I also have a white x.naxbar with a logo behind the menu thats supposed to show up. You can see it working if the window viewport is more than 979px wide. For some reason the white navbar doesnt show up below that.

[Joao]

Hi There,

Have you made some changes? When I checked earlier today it was not working but now seems to be working fine on my end and the white mobile bar is working fine on smaller screens.

Let us know more details.

Thanks

Joao

[lessandmore]

Yeah I fixed it, for some reason the navbar wasn’t getting the fixed class appended to it right away. So I just made x-navbar fixed by default.

[Joao]

Hi There,

That is great.

Let us know if you need help witth anything else.

Joao

[lessandmore]

Hi,

I ran into another issue, for some reason the scroll down arrow on the home page is not fulling anchoring to the top of the next section. I am not sure if I fubar’d any CSS that controls that part.

Any help is appreciated, thanks!

[Rue Nel]

Hello There,

Thanks for the updates! The issue happen because you have added the section for the SuperFly menu icon. To resolve this issue, please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

// Slider Scroll Bottom Anchor
// =============================================================================

jQuery(function($) {

  //
  // Slider below.
  //

  $('.site .x-slider-container.below .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 + 80
    }, 850, 'easeInOutExpo');

  });

});

Hope this helps. Please let us know how it goes.

[lessandmore]

It works. But it stops a little before the next section like it used to and then scrolls to the next section.

[lessandmore]

Any fixes on this? Appreciate it

[Nico]

Hi There,

You could try creating your own down arrow so you could add a specific ID to the down arrow. Add the arrow inside your rev slider.

for guide:

https://community.theme.co/forums/topic/creating-my-own-down-arrow-button/

Hope it helps.

Let us know how it goes.

Thanks.

[Author]

Posts