I want to set up a sticky header that should look like this:
This top bar use this padding settings:
But if set the bar to “sticky” it, doesn’t calculate the height of the bar correctly, and it looks like this!
The header element container seems to be the same height, but not the element under them:
It seems that in “sticky” mode the height has a wrong calculation:
I have a sticky bar update coming sometime next week. I’ll make sure it doesn’t even try to shrink if you are not trying to shrink which is why you have a bad calc value. Have a great weekend.
I did confirm the mobile as well. It’s primarily with the usage of “auto” as well which affects both views. Aiming for Wednesday
Any update soon? I have a presentation of this home page this week!
Or any intermediate solution for the presentation?
Hi @Regnalf,
Regretfully, there is no update on this till now. Still, I will check with Charlie and inform you of this.
Thanks
I’m reviewing the sticky bar changes today, and most likely release tomorrow.
An intermediate solution would be to not use “auto”. This would involve probably changing the height based on breakpoints given your design being slightly different for mobile.
These changes are up. Let us if “auto” works better for you with sticky bars.
I’m sorry, but I’m going to have to check back on this one. I needed this sticky menu on another site too but i still got issues.
The update fixes the bug on the desktop, also when checking with the browser dev tools for mobile devices. But on a real device (in my case an iPhone 11) the following still happens, unfortunately.
When scrolling down, the sticky menu still works fine. Only when scrolling up does a miscalculation apparently still happen when you scroll back to the top of the page. As already written above, this only happens on a real device!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
