Issues with Motion.Page and Bricks sticky header

Hi Everyone,

I’m wondering if anyone else has had this issue and how they addressed it.

I am using Motion.Page with ScrollSmoother enabled. I have a sticky header that uses BricksExtra’s Burger Trigger to trigger an OffCanvas menu.

The issue I am having is that as long as Motion.Page is active, the sticky header doesn’t work, and what’s worse, there is a content shift when the Burger Trigger is clicked.

I am currently developing in Local, so, unfortunately, I cannot share a URL, but I plan to migrate it sometime soon and will provide one once I do. In the meantime, here is a demonstration video. Has anyone dealt with this before?

Thanks for your help!

ScrollSmoother doesn’t allow for using fixed elements

You’d have the same issue with any fixed elements on your page.

Note there’s an alternative to ScrollSmoother that doesn’t break fixed positioning - https://lenis.studiofreight.com/

Hi,

not using motionpage but GSAP (and scrollsmoother) with Bricks.
I’ve wrapped brx main content with the two div required. After header and after footer = fixed/sticky header is outside.
Then you’ll only have to adjust some spacing/heights for header and footer but all is working fine.