VitiSynth - James Wright

August 15, 2020, 7:54 AM

Hi,

First of all, great community!

I have 2 things so far that I would like to see if there is a solution for this:

If you are trying to build a page that has a transparent header (similar to this one Web- & Werbeagentur UMSICHT ) and you add the include-header class on the hero image / slider section, then once the page has loaded and the “header-wrap-clone” element is added the whole graphic jump down, what is not very nice. Is there any way that I can do to fix this? You can see the jump on your demo page Web- & Werbeagentur UMSICHT
I like the sticky-footer option where the footer is static in the background and the content slide off it, the only problem I have is that, if there is not enough content on the page the footer is not sticking to the bottom of the page as in 5.9, the footer is riding up the page. (see image) is there anything that I can do to make the footer always stick to the bottom of the page?

Thanks James.

Reply

Solved

August 11, 2020, 12:03 PM

Hello,

Thank You so much for the Kind Words!

You can see this Jump due to the Page Transitions being disabled by default in the Latest Version of Canvas. If you enable it again: http://docs.semicolonweb.com/docs/getting-started/page-transition/, this will be hidden. As the Headers in Canvas 6 is Flexible and does not use any Fixed Heights, we have to calculate the Heights for the Header using JS and it is being applied while the Page is being Loaded. We will try to continue finding ways to make it more elegant in the Future Versions. So, simply adding the .page-transition Class to the <body> tag should fix this.
We have removed the JS Code that used to calculate this in the Latest Version to minimize JS Usage. Consider using a Minimum Height for the #content DIV by simply adding the .min-vh-75 Class to it. This will add a minimum height of 75% Viewport Height to the #content Area which would make the Footer sticky at the bottom always and will also be reliable on CSS which would be way faster and easier on the browsers too. If this would not be an optimal solution for you, please let us know.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Thanks & Regards,
Vitisynth Team.