Hello! I would like to place a sticky menu/bar with one or more clickable buttons fixed at the bottom of the screen always visible during navigation but only when users are using mobile devices.
No one answer the similar question i found in the forum.
Is it because it is not possible to do it using Bubble?
Anyone can help?
I would apreciate!
Thanks!
Use a floating group only in the mobile view (Condition will be when screen width is less than 400 it need to be visible)
380 is bubble engine when you make it default mobile view
Hello, thank you for your quick answer.
Unfortunately, I don´t see how this solves my problem (am I not geting it?) .
Let me try to explain what iI think it seems to be the issue here.
In the floating group, you choose if the element floats relatively to the header or to the footer of the page. Right?
But I want the menu to stick not to the footer or header of the page but to the bottom of the users mobile device.
So that the user can be scrolling along the page with the menu always visible stick at the bottom of the mobile phone screen.
I want to be albe to make this visible only in some pages (homepage, some dynamic pages, etc) and invisible at others (listing pages, for example).
How to make the menu stick/float relatively to the users mobile device screen?
Is this clear now? I am sorry if i wasn´t clear in my initial post.
Thanks in advance for your time!
Try the template logic
Please consider that the FG setting is to have it float relatively to the “bottom” not to a “footer”.
Build a test page and make it very tall (say… 2000 px) with few groups and elements at different Y coordinates where you can scroll up and down and also clearly see how their responsiveness works “horizontally” in the responsiveness tab of the design editor.
Add a fg set to float relative to the bottom and be of the same width of the page (just to see … you can change it later as you see fit). Color it so you can see it well. Check how things behave in the responsiveness tab of the editor at different widths. Of course, also check it from a mobile device.
This fg will “stick” on the viewport as the user scrolls down as far as they want. So the behavior you want for this fg to always stick at the bottom of the mobile screen as a user scrolls up or down is achieved.
As for it to show or not depending on the page you can set a condition to the fg to be visible if the page name is or it is not the page name/s you want. This is one basic way to approach it. Another one will be to set a list of page names (option sets) in the user data-type and check for the current page name to be contained or not in that list. Of course, you can set different user types (option sets) and add the pages there. And establish the user type with those “page permissions”) as a field in the user data-type in the dB.
Hope this helps 
The use case you’ve described is exactly what using a floating group will achieve.
Try what @cmarchan has outlined above so you can see for yourself how it works then you’ll have a better understanding of using a floating group to achieve this.
1 Like