I am creating a single page site to convert to mobile app and would like a link menu like the one below:
I need the page to greyout so that the white cells show up, but only the Popup element has a greyout feature and Popup align centre (I need to align to bottom). The GroupFocus element is the best option to attach to the bottom elements but that doesn’t have greyout.
Does anyone know how I can achieve this look with Bubble?
Also looking for this. Did you ever manage to figure it out?
Hi @xtechaus,
This should be quite easy to accomplish. Add a group focus or floating group (might be better) to the page, set it to column layout, container alignment bottom, width and height to 100% and background color to black + opacity around 40%. Next add the buttons to the group focus and center them. To trigger the group focus to show, use a animate action to make it look a bitter better:
The result:
Hope this helps,
Gerbert
MVP Design
Hi @gerbertdelangen , I just found this post when I was searching how to grey out the background while popping up side categories… I did as you said but my result is this
H @saranya, hope I understand what you mean. It seems you also set the opacity for the element with categories to something like 60% (or lower), but that should be at 100%.
Hard to determine the issue without seeing the actual app. I would go through the elements and make sure there is no opacity configured anywhere in the top element and the elements below.
Another option, maybe right clicking the floating group and selecting ‘Bring to front’ solves the issue.
I think you made some confusion here with the opacity mentioned by @gerbertdelangen . So let contextualize this, we have element opacity and color opacity.
Keep in mind that the element opacity affect all the children elements. So probably you are using this opacity in the FloatingGroup CategMenu when in fact you need to set the color opacity.
oh Yes! It worked. Thanks @Newed & @gerbertdelangen for your help…
