I have a header set to be “sticky”. When I view a page, the body is correctly underneath the header and when I scroll it up, the header stays put, as it should.
However, when i scroll the content back down, it doesn’t start underneath the header; it stops at the top of the page, underneath the header. It didn’t used to do this before.
Is there a change I need to my header setup?
Hello Adrian,
Thanks for writing in! The issue could just be the cache. Please clear all your plugin caches and test the site again. After doing the updates, always remember to clear all caches (if you are using WP Rocket, WP SuperCache or W3 Total Cache) when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.
And please clear your browser cache too. You may use private browsing mode in testing your site to make sure that you are viewing the latest codes from the updates and not the cached version in your browser.
The issue could also be caused by a plugin conflict, amongst other things. Please check out this troubleshooting article here and follow the instructions for the following sections (where appropriate):
If after trying all of the above things you are still experiencing problems, please reply below, including login details to your site in a secure note, so that we can investigate further. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
To know how to create a secure note, please check this out: How The Forum Works
Best Regards.
Thanks. I am not using any caching (I’ve used the “Clear style cache” on Cornerstone settings), can, etc.
I have all plugins turned off and the problem persists.
After scrolling down the page, then back to the top, the content can be seen behind the sticky header. If you mouse hover on a menu item in the header, which has a drop-down, the page content appears below the header, as it should.
The problem only appeared with the latest Pro version.
I will attach a secure note with relevant details.
Thanks
Hello Adrian,
The given credentials do not work for us. Please double-check it.
Thank you.
My apologies. I gave you the wrong usercode. Sorry.
Hi Adrian,
I have investigated your website and found that the Shrink Amount in the Sticky attribute is set to 0.8280000000000001 which is the reason behind your issue. I went ahead and set it to 1 and now the problem is solved.
Thanks
Thanks a lot for that. I wonder how it got set to that? … Must have been a random mistake on my part.
Actually, it seems the problem occurs with any value other than 1. For example, a shrink value of zero (which is what I really would normally use) still has the problem.
Setting it to 1 gets around the problem for now, but it causes the logo in the sticky header to look a little of when “shrunk”.
Hi Adrian,
Glad that it resolves your issue. The Shrink Amount resized the Bar while it is sticky, the value in a specific fraction might calculate resize amount which creates the issue. Still, if you find any problem please provide any video that helps us to understand what exactly you are seeing.
Thanks
I don’t really understand what you are asking for. The problem is as I described it my original post and first reply. You saw the problem yourself, I believe, when you accessed my site.
Setting shrink to 1 works around the problem. Setting shrink to zero, or any other value causes the problem.
For example, with shrink set to zero, scrolling a page back down causes the top of the page to be behind the (sticky) header, instead of below it. Mouse hovering over a menu item with sub-items causes the page to move back below the header.
Hi Adrian,
I have tried to explain the Shrink Amount and why the fraction value might create the issue in your case. I have checked with the value 0.99 and that also creates the issue as the Sticky Bar should have the fixed height as it recalculates the Height of the bar while it is sticky, but not able to calculate if the height is set to auto as in your case.
I went ahead and set the height to 60px temporarily in your staging site, please adjust it according to your need.
Thanks
Thanks for the explanation, Trustup. However, there is still what I consider to be a problem. Even with the bar height set to 60px, the problem still happens. It is happening with your “test by theme” page, too. So, if the shrink amount is zero, there is a problem.
I am confused, because one of my headers “Main page header” seems to work correctly, now that I have set the height to 60px. But the “Front page header” still shows the problem. I can’t work out what the difference is.
This only started with the latest Pro release, so something must have changed somewhere.
Hey Adrian,
Pro 5.1.4 is now available in automatic updates! This release contains fixes for several issues, like you have mentioned above, so be sure to check out the changelog (https://theme.co/docs/changelog/pro-5). Please do update to the latest version. After doing the updates, always remember to clear all caches when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.
Meanwhile, please set the Shrink amount to always 1. Setting it to 0 will create the issue.
Best Regards.
Thanks. The update seems not to make any difference. However, setting shrink amount to 1 does seem to prevent the problem.
Nevertheless, having a shrink amount less than one surely should not cause the problem? In other words, there’s still a bug; it’s just there’s a work-around.
I was going to suggest updating your documentation for the Bar object to indicate that Shrink Amount should always be set to 1. However, the documentation does not seem to contain anything on the Bar object - maybe it needs adding?
Hey Adrian,
The Bar element was not explained in the documentation. We do have a video tutorial that demonstrates each of the functions and features in the Sticky option. You can check at 7:55 of the video below:
Hope this helps.
Thanks. The video doesn’t show the problem I identified, even with a shrink amount of less than 1.
So I still believe there is a problem to be fixed.
Hey Adrian,
I’ve set the sticky header Shrink Amount to 0.5. Please take a look at the video recording of your home page header in the secure note. It doesn’t seem to exhibit the issue you describe: the body (content) goes to the top of the page when you scroll down, mainly when the sticky header sticks on top of the page. The body content remains below the sticky header until you scroll further down which is normal.
By the way, the Shrink Amount should not be set to 0 though it is allowed for unusual setups. When you set it to 0, the header’s height will collapse so your content will be on top of the page.
If you’re not getting the same behavior as in the video, please clear your browser’s cache. Otherwise, please record or take a series of screenshots of what you’re seeing on your end.
Thanks.
Oh well, something must have changed, I guess. Thanks for your help. If I see the problem again, I’ll let you know.
Hi Adrian,
Great and you’re welcome! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.
Thank you.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
