Canvas Support

Jump in content when using include-header class

1 reply · opened Jun 8, 2020

Mmi32dogsJun 8, 2020

Hi,

First of all, great template, I was working on a new site with version 5.9 when version 6 came out so I’m starting again with version 6.

I have 2 things so far that I would like to see if there is a solution for this:
First: if you are trying to build a page that has a transparent header (similar to this one http://themes.semicolonweb.com/html/canvas/index-fullscreen-image.html ) 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 http://themes.semicolonweb.com/html/canvas/index-fullscreen-image.html

Second, 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 Rob

SSemicolon WebSTAFFJun 8, 2020

Hello,

Thank You so much for the Kind Words! :)

  1. 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.

  2. 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.

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