[hshiuParticipant]

Hi,
First of all, thank you for an awesome theme.
I installed the child-theme and made modification to fix the stacked masthead to the top. Now when the Revolution Slider down anchor is clicked, the top part of the first section is landed right behind the stacked masthead.

I would like to know if there is something simple that could direct the down anchor to land about 100px further down.

Below is the code used to create the fixed top stacked masthead effect:
CSS
@media (max-width: 979px) {
.masthead-stacked .x-navbar.x-navbar-fixed-top {
position: fixed;
}
.x-topbar-fixed-top, .x-logobar-fixed-top {
height: 142px;
}
}
js
(function($) {
$(window).scroll(function() {
if ($(window).outerWidth() > 767) {
if ($(this).scrollTop() > 0) {
$(‘.masthead-stacked’).css({
‘position’: ‘fixed’,
‘width’: ‘100%’,
‘z-index’: ‘1025’
});
} else {
$(‘.masthead-stacked’).css(‘position’, ‘relative’);
}
}

});
})(jQuery)

I have tried adapting this https://community.theme.co//forums/topic/getting-the-anchor-link-in-revolution-slider-to-scroll-further-down-the-page/ but unfortunately, without success!

I also tried the following:

jQuery(document).ready(function($) {
$(‘.x-slider-container.above .x-slider-scroll-bottom’).off(‘click’);
$(‘.x-slider-container.above .x-slider-scroll-bottom’).click(function(e) {
e.preventDefault();
var $navbarFixedTopHeight = $(‘header .masthead .masthead-stacked’).outerHeight();
var $cbOffset = $(‘#x-section-1’).offset();

$(‘html, body’).animate({
scrollTop: $cbOffset.top – $navbarFixedTopHeight
}, 850, ‘easeInOutExpo’);
});
});

The landed position did change but not where it should be and the stacked logo disappeared.

Please help.

Thanks!

[RupokMember]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[hshiuParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Please replace this line of code,

scrollTop: $cbOffset.top – $navbarFixedTopHeight

to this,

scrollTop: $cbOffset.top – ( $navbarFixedTopHeight + 105 )

Thanks!

[hshiuParticipant]

Hi, I replaced the line of code as instructed and it is still not working.

BTW, here is the configuration:
WordPress: version 4.4.1
X version: version 4.3.0
Cornerstone plugin: version 1.0.11

Problems

• When scrolling up, the masthead-stacked with the logo isn’t fixed to the top.
• After clicking the anchor bottom link in the Revolution Slider, the top of section#1 ends up behind the masthead.stakced.

Code entered in Customize > Custom
CSS
@media (max-width: 976px) {
.masthead-stacked .x-navbar.x-navbar-fixed-top {
position: fixed;
}
}

js
jQuery(document).ready(function($) {
$(‘.x-slider-container.above .x-slider-scroll-bottom’).off(‘click’);
$(‘.x-slider-container.above .x-slider-scroll-bottom’).click(function(e) {
e.preventDefault();
var $navbarFixedTopHeight = $(‘header.masthead.masthead-stacked’).outerHeight();
var $cbOffset = $(‘#x-section-1’).offset();

$(‘html, body’).animate({
scrollTop: $cbOffset.top – ( $navbarFixedTopHeight + 105 )
}, 850, ‘easeInOutExpo’);
});
});

(function masth($) {
$(window).scroll(function() {
if ($(window).outerWidth() > 767) {
if ($(this).scrollTop() > 0) {
$(‘.masthead-stacked’).css({
‘position’: ‘fixed’,
‘width’: ‘100%’,
‘z-index’: ‘1025’
});
} else {
$(‘.masthead-stacked’).css(‘position’, ‘relative’);
}
}
});
})(jQuery)

I have attached the screenshot to illustrate the problem. What am I missing?

Thank you for your help.

[Rue NelModerator]

Hello There,

Please update your JS code and use this instead:

jQuery(document).ready(function($) {
  $('.x-slider-container.above .x-slider-scroll-bottom').off('click');
  $('.x-slider-container.above .x-slider-scroll-bottom').click(function(e) {
    e.preventDefault();
    var $navbarFixedTopHeight = $('header.masthead.masthead-stacked').outerHeight();
    var $cbOffset = $('#x-section-1').offset();

    $('html, body').animate({
      scrollTop: $cbOffset.top – ( $navbarFixedTopHeight + 105 )
    }, 850, 'easeInOutExpo');
  });
});

(function masth($) {
	$(window).scroll(function() {
		if ($(window).outerWidth() > 767) {
		     if ($(this).scrollTop() > 0) {
		        $('.masthead-stacked').css({
		            'position': 'fixed',
		            'width': '100%',
		            'z-index': '1025'
		        });
		    } else {
		        $('.masthead-stacked').css('position', 'relative');
		    }   		
		}
	});
})(jQuery);

Please be very careful with the quotes. One missed or invalid quotes will result a JS error.
Hope this helps. Please let us know how it goes.

[hshiuParticipant]

Hi there,

I copied and pasted the code in. It didn’t change anything.

The masthead.stacked logo disappeared.
The top part for #x-section-1 is blocked behind the masthead.

Actually, the landing position stayed the same, with or without the following code.:
jQuery(document).ready(function($) {
$(‘.x-slider-container.above .x-slider-scroll-bottom’).off(‘click’);
$(‘.x-slider-container.above .x-slider-scroll-bottom’).click(function(e) {
e.preventDefault();
var $navbarFixedTopHeight = $(‘header.masthead.masthead-stacked’).outerHeight();
var $cbOffset = $(‘#x-section-1’).offset();

$(‘html, body’).animate({
scrollTop: $cbOffset.top – ( $navbarFixedTopHeight + 105 )
}, 850, ‘easeInOutExpo’);
});
});

The screenshot failed to attache last time. Here it is. Hope you can see what I mean.

Thanks!

[RadModerator]

Hi there,

Does this code from another thread? or your custom code?

And please provide your admin login credentials in private reply for testing. There is an error throwing in this line:

scrollTop: $cbOffset.top – ( $navbarFixedTopHeight + 105 )

It’s correct, but there could be hidden characters on it that causes your issues. It could be the minus sign, please try this.

scrollTop: $cbOffset.top - ( $navbarFixedTopHeight + 105 )

Thanks.

[hshiuParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Should be working now.

jQuery(document).ready(function($) {

  $('.x-slider-container.below .x-slider-scroll-bottom').off('click').click(function(e) {
    e.preventDefault();
    var $navbarFixedTopHeight = $('header.masthead.masthead-stacked').outerHeight();
    var $cbOffset = $('.home .entry-content').offset();

    $('html, body').stop().animate({
      scrollTop: $cbOffset.top - ( $navbarFixedTopHeight  + 15 )
    }, 850, 'easeInOutExpo');
  });
});

(function masth($) {
	$(window).scroll(function() {
		if ($(window).outerWidth() > 767) {
		     if ($(this).scrollTop() > 0) {
		        $('.masthead-stacked').css({
		            'position': 'fixed',
		            'width': '100%',
		            'z-index': '1025'
		        });
		    } else {
		        $('.masthead-stacked').css('position', 'relative');
		    }   		
		}
	});
})(jQuery);

Second, when you copy and paste a code, make sure to manually edit all minus sign, and type it in. The copy and paste process converts the short minus sign to long minus sign (special character).

Cheers!

[hshiuParticipant]

Thank you! Thank you! Thank you!
Amazing helpful support. I really appreciated you went the extra mile to get it right! It is working. Most awesome!

[LelyModerator]

You’re welcome!

Always,
X

[Author]

Posts