Canvas Support

Choppy transition to sticky header

1 reply · opened Aug 8, 2016

CcuchosanAug 8, 2016

In HTML/index.html, when scrolling down and the header transitions from the initial state to sticky, the transition is choppy (ie not smooth).

Is there a way to deactivate the animation, and just change from one state to the other?

It doesn't seem to be a problem with parallax as this happens also with parallax deactivated.

I am running a fairly new Macbook Air.

SSemicolon WebSTAFFAug 10, 2016

Hello,

We have just checked this out on Chrome, Firefox on a Macbook but it appears to be working fine for us. If you would like to disable the Animation, you can simply find the following code in the style.css File: 

#header,
#header-wrap,
#logo img {
	height: 100px;
	-webkit-transition: height .4s ease, opacity .3s ease;
	-o-transition: height .4s ease, opacity .3s ease;
	transition: height .4s ease, opacity .3s ease;
}

#primary-menu > ul > li > ul,
#primary-menu > ul > li > .mega-menu-content,
#primary-menu > ul > li.mega-menu > .mega-menu-content {
	-webkit-transition: top .4s ease;
	-o-transition: top .4s ease;
	transition: top .4s ease;
}

#top-search,
#top-cart {
	-webkit-transition: margin .4s ease, opacity .3s ease;
	-o-transition: margin .4s ease, opacity .3s ease;
	transition: margin .4s ease, opacity .3s ease;
}

body:not(.top-search-open) #header-wrap #logo,
body:not(.top-search-open) #primary-menu > ul,
body:not(.top-search-open) #primary-menu > .container > ul,
body:not(.top-search-open) #top-cart,
body:not(.top-search-open) #side-panel-trigger,
body:not(.top-search-open) #top-account {
	opacity: 1;
	-webkit-transition: height .4s ease, margin .4s ease, opacity .2s .2s ease;
	-o-transition: height .4s ease, margin .4s ease, opacity .2s .2s ease;
	transition: height .4s ease, margin .4s ease, opacity .2s .2s ease;
}

and remove the transition related codes inside it. Additionally, you can also consider adding the .static-sticky Class the #header Tag which keeps the Header Static on Sticky.

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard