This is responsive design for mobile pages.
I have a header made of reusable elements and has a hamburger icon
When you tap the hamburger icon, a side menu will appear overlapping the left side of the page.
How can I make the side menu always display at full height regardless of the page size?
Header and menu are both floating groups and reusable
And I tried making all elements vertical stretch, but it doesn’t work.
Of course, the vertical width is not fixed, and the maximum value is left blank.
Can someone help me?
yes it doesn’t work well
Side menu only exists in the header and is only visible at 100% of the header height
It would probably work if you put a side menu on every page, but I don’t think that’s smart.
Hmm…
I have attached the demo page for reference.
If you input the actual height value of FG, you can get the menu height, but you cannot flexibly maximize the display.
The % specification is applied to the size of the parent header, so it is not applied to the entire page.
What i did was to just give the floating menu a large min height, bigger than any page (i gave 1200px), and i just make sure i dont use all this height so i won’t get any scroll bar. when i put the reusable header on the page, i set the header it to a low max height, and still it shows the side menu on the whole page. it worked for me.
example here Your Bubble app
editor here Nocode2511 | Bubble Editor
thank you
However, wouldn’t this create a blank space at the bottom by the height of the menu that exceeds the original page height?
Is there a way to avoid this?