I have an app with a Nav bar at the top of the page which was just easier in general.
I want to move that NavBar (a reusable element) to the bottom of the screen and have it be the exact bottom of the screen no matter what device it’s on. Tiny iphone, huge samsung phone, etc. Many different screen sizes.
What is the proper way to do this in Bubble?
It should be at the bottom of the screen at all times and the scrolling should happen above the NavBar for very long pages, while the NavBar stays fixed.
Gave that a shot. It worked but raised some more questions. First, “built with Bubble” overwrites it. Does that go away in production? It definitely interferes with the NavBar otherwise.
Second, it goes hard left or hard right for horizontal alignment instead of center. Because the screens are all different widths, I had made it a bit smaller than need be so it can fit on all screens.
May have to look into how to adapt a bubble app to different screen sizes because I’m obviously doing that all wrong.
This part is going ok actually, thanks to @nico.dicagno . Nico’s post was correct about how to get the reusable group to float, then stick to the bottom of the screen.
It goes away on any paid plan. If you are on a paid plan, you might have a ‘Built on Bubble’ element which you should delete.
On Bubble, floating groups cannot be center aligned, but in the case of a Nav Bar it’s not really a problem, as its good practice to make it stretch the enitre width of the phone. To do this, set the ‘max width’ setting to blank and make sure to uncheck the ‘Fit width to content’ checkbox. This will allow the navbar to stretch to the width of its parent container (in your case the page, so it will be as wide as the user’s mobile, regardless of its size)
Have you checked out some tutorials on Bubble’s responsive engine?
Thank you so much, including what tutorials to watch. I will do so immediately. I think I glossed over that part when learning Bubble and should have paid more attention to it.
Although… I don’t seem to have the options you are suggesting to check. I cannot set the width to 0. It will not accept anything less than 1. And I don’t have a “fit width to content” checkbox it seems. Also not under the “Appearance” tab
To access the responsive settings, select any ‘container layout’ other than Fixed. ‘Responsive’ means that the elements have the ability to respond to changing widths of the device, and change their dimensions. ‘Fixed’, literally means that their dimensions are fixed no matter what.
Your container layout should be set to ‘row’, as all the elements inside of it are oriented in a row. Once you change the container layout, you should be able to access the properties i mentioned earlier.
Having said that, I take it that you have all your containers set to fixed. Before making any changes i would recommend to watch some tutorials on the responsive engine. They are very useful and worth the time
