Fixed Topbar Jumps on Mobile

[a_buzon]

Hello,
I was wondering if there’s an easy way to get my fixed topbar to not jump so bad when scrolling down.
https://supeckseptic.com/

It doesn’t jump on desktop, only on mobile.

The CSS I’m using is:

.x-topbar.x-topbar-fixed {
    position: fixed;
    width: 100%;
    top: 0;
}

And the JS is:

jQuery(function($) {
	$(window).scroll(function(){
        if($(window).scrollTop() > 0 ){
        	$('.x-topbar').addClass('x-topbar-fixed');
        } else {
        	$('.x-topbar').removeClass('x-topbar-fixed');
        }
    });
});

Thanks!

[ruenel]

Hello There,

Thanks for writing in! Could you please update the css code and use this:

.x-topbar.x-topbar-fixed {
    position: fixed;
    width: 100%;
    top: 0;
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -ms-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
}

Hope this helps.

[a_buzon]

Hi @RueNel, Thanks for the tip!
It still jumps on mobile, but it’s not that big of a deal. If you have another trick to try - cool. If not, no big deal.
Thanks again!

[paul.r]

Hi,

You can try adding this in Theme Options > CSS

@media(max-width:767px) {
.x-topbar {
    top: 0;
    width: 100%;
    position: fixed;
}

.x-navbar-wrap {
    margin-top: 46px;
}
}

Hope that helps