Canvas Slider causes screen to jump down

Question

Hi! I'm in the process of updating a site from 5.x version of Canvas to 6.3. It's going well and your team helped me with creating a double top header (parent company endorsement bar and regular menu bar). I am experiencing a problem that I have not been able to troubleshot and am hoping you can help. When visiting this page after about 1 second the top section then jumps down about 1 inch and it's pretty jarring.

Here's the link: https://beta.connectionsbytsw.com/acquire-new-customers-inserts

It looks like it calculates the size of the slider, then after content loads it recalculates and adjusts the height? Or possible because I have introduced the double header I'm missing a CSS change that needs to be done?

Thanks for any help!

SemiColonWeb · Accepted Answer

Hello, Canvas allows Flexible Header Heights without any extra CSS which was not possible with Canvas . To avoid this jump, simply add a blank DIV just after the DIV is closed. Example: and then add the following CSS Code: This will definitely fix this. Hope this Helps! Let us know if we can help you with anything else or if you find any further issues.

WaylonCash · Answer

Hello,

I've updated the code with your recommendations and it's still doing the shift after the page loads. I added the blank .header-wrap-clone and the additional CSS markup as you noted. Still no luck: https://beta.connectionsbytsw.com/acquire-new-customers-inserts

Any additional help is greatly appreciated. Thanks!

Semicolon Web · Answer

Please update your CSS to this: This should definitely work fine. Hope this Helps! Let us know if we can help you with anything else or if you find any further issues.

WaylonCash · Answer

Awesome. That did the trick! Thanks again for your great support.