Issue designing with floating elements in full page

Hello there!
First message on this forum. Thank you for welcoming me! Excited to learn about Bubble.

I’m trying to build my first design. My aim here is to create a floating element for the header, and another floating element for my navigation column.
I tried in different ways but each way has some issues… So I wonder how you would do.

First try
A reusable element for the header, another reusable element for the column navigation bar.
Issue: For mobile uses, I have an icon in header to show the navigation bar. But the icon is in the reusable element so the workflow can’t call an outside element… So I can’t toggle my navigation bar with these two reusable elements.

Second try
A full reusable element for header + navigation column, so I can deal with my workflows (show, hide, everything is ok).
BUT… if my reusable element is a floating group… this is a square… and this is mandatory in front of all my contents. So my contents are not clickable!!! I can’t click on my “Voir ce produit” button, behind the background of my whole reusable element.
Maybe a solution using z-index? But i’m not sure i can…

Could you help me to find the best way for this usecase, with the best practices of Bubble?
Thank you all <3

Sorry, little up…
I haven’t found any idea yet.
Thank you!