Docs

[tychartier]

I am in the process of building a new site proactivecomfort.com I have gone through some of the threads and figured out how to shrink the logo based when a user scrolls down the page. This has a nice smooth transition on desktop but when I view it on mobile it looks terrible. Half the time the transition lags or doesn’t load until far down the page. Please advise on how I can fix this.
(CSS)
.x-navbar.x-navbar-fixed-top .x-navbar-inner {
transition: all 0.85s ease;
-webkit-transition: all 0.85s ease;
}
.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand, .x-navbar .x-navbar-inner {
-webkit-transition: height 0.85s ease, padding-top 0.5s ease;
transition: height 0.85s ease, padding-top 0.85s ease;
}

.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand, .x-navbar .x-brand img {
-webkit-transition: all 0.85s ease;
transition: all 0.85s ease;
}

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
height: 60px;
padding-top: 25px;
}

.x-navbar .x-brand img{
width: 350px;
-webkit-transition: all 0.85s linear;
transition: all 0.85s linear;
}

.x-navbar.x-navbar-fixed-top .x-brand img {
width: 220px;
-webkit-transition: all 0.85s linear;
transition: all 0.85s linear;
}

.x-navbar.x-navbar-fixed-top .x-navbar-inner {
min-height: 60px;
}

(JS)
jQuery(function($) {

$(window).scroll(function(){

if($(this).scrollTop()<=0) {
$(‘.x-navbar’).removeClass(‘x-navbar-fixed-top x-container-fluid max width’);
}

});

});

[Rupok]

Hi there,

It seems you are using larger transition. Kind;y decrease the value to something like 0.3s instead of 0.85s to get better result.

Thanks!

[Author]

Posts