Reusable element inside header - new responsive engine

Hi,
I have my header bar which is a reusable element and I have my slider menu bar which is also a RE. I want to be able to toggle the slider menu bar from a button (hamburger icon thing) inside my header bar. So in order to do that, I added the slider menu bar RE as a child of my header bar.

Slider menus are pretty much always the full height of the page, which is also what I want. The problem is that the header bar is 70 px tall and if I set the max height of the slider menu bar to be 100%, it bases the 100% off of the height of the header bar, not the page that the menu bar is on.

Is there a way to get the slider menu bar to be the full page height in the new responsive engine while also being an child element of my header bar?

I know that I can just add the slider menu bar to the page and then set the height to 100% but then I also have to have my hamburger icon added to every page along with the associated workflows. I have 20+ pages and counting so I would really love to do all this within the header bar to make things more efficient.

My guess is this can’t be done but maybe someone has a clever idea?
Thanks
Paul

Hi @paul29 ,

I’m battling with the same issue. Ive achieved this before but i’m struggling to replicate it again.

The way I did it was to have the menu as a stand alone RE placed on the index page. Set a custom state on the header burger menu… something like ‘show menu?’ which toggles yes/no when you tap it. (custom state value=show menu? = no will behave like a toggle)

Then in index, have a do when condition is true, RE show menu? = yes … reset the flag and show the RE with an animation.

The part i’m struggling to replicate is having the RE stretch vertically across the whole viewport. It’s possible, i’ve done it plenty, but i’ve since deleted the pages :frowning:

Awesome. thanks for your response. I know what you mean and I’ll give it a try today or tomorrow. I’ll report back

Hola, yo este problema lo resolvi de la sgte manera.

1.- menuside bar RE
2 menu de navegacion RE
3 La pagina que los une (index) copie el tutorial de sidebar new responsive engine

entre ellos trabajan con estados, ej
el icono de hamburguesa lo cambia un estado, por decir “ver” y le pone “si”

el side bar es escondido y solo aparecerá si ese estado cambia a “si”.
ahora bien ese estado al apretarse de nuevo se cambia a “No”
lo que hace que ese menú desaparezca.

Saludos desde Chile

Thanks @estudio315 and @argent.uk
This this is the way to get this done. I appreciate it.

This still is a little bit cumbersome as you still have to add events on the page side. Ideally bubble will implement a way to completely handle this on a reusable element side so that you can just drop these elements onto the page and go. Header and slider bar are so common on pretty much every website these days that this is must have functionality in my opinion @josh

Thanks again for your help