Jump In Content When Using Include-Header Class

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:

  1. If you are trying to build a page that has a transparent header 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 jumps down, which is not very nice. Is there any way that I can fix this? You can see the jump on the fullscreen image demo page.
  2. I like the sticky-footer option where the footer is static in the background and the content slides 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. Is there anything that I can do to make the footer always stick to the bottom of the page?

Thanks Rob.

Reply

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. If you enable it again, this will be hidden. As the Headers are Flexible and do 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.

Reply

That fixed the jump, thank you. The minimum-height class solved the footer too.

Reply

Ran into the same thing last week. Adding the page transition class is the cleanest fix by far.

Reply

Glad that sorted it. Marking this one as solved.

Reply to the Message

Sign in to reply to this discussion.