How to create a floating header


I’m trying to configure a floating header that only shows up when the page has scrolled beyond the original in page header. I have been experimenting with different conditions but none seems to achieve the effect.

Here’s an example of what I’m talking about:

Does anyone here ever tried to create something like this? If so, any advice would be great!

FundKernel Development

if your non-floating header is 60px in height, when the page scrolling position is 60 you should show the floater header

Thanks @boston85719. Where would I configure that? Is it part of a “Condition” for the floating header?

Screen Shot 2021-01-05 at 11.37.52 PM

Might need to tweak it a bit to get the look just right when on the page, and ensure your header never expands its height from lack of responsive design.

I’ve done it before and it can look pretty seamless but can’t remember off hand if I used the same exact scrolling position as the header height or not.


Hi @boston85719.

It is working beautifully!

Thank you!

FundKernel Development

This topic was automatically closed after 70 days. New replies are no longer allowed.