Issues with Motion.Page and Bricks sticky header

1

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!

2

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/

1 Like
4

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.

1 Like