Forum Academy Marketplace Showcase Pricing Features

Formatting Bottom Sticky Nav Bar (Mobile)

Hello, new Bubble user here and I’m working on building an app that can be viewed on both desktop and mobile. I’m really surprised that I couldn’t find an answer to this question on the forum, as this seems like a basic functionality for any mobile app. On mobile, I would like to have a sticky bottom navigation bar with 4-5 evenly spaced buttons. I built the bar this by making a floating group, setting it aligned to bottom of screen, and then adding 5 horizontally aligned groups inside of this. BUT, I’m not sure how Bubble’s page height works because I can’t seem to get this reusable element to work on pages that have different page heights… some pages have a fixed height of around 600px (so i just take that page height and subtract the pixel height of the bar, to get the height value for the bar…) and other pages have a repeating group set on “Full List” which make the height super long (and then i end up not seeing that nav until i scroll to the bottom of the page).

In another thread, this question was answered saying: “Change the css on html element, so this footer group/div will stick on to bottom of the page for all the devices even desktop too”. Okay yeah how do we do this in bubble because it doesn’t seem like there’s any settings for manually changing the css?

Thank you!
Best,
Vincent

1 Like

There are no manual settings. You can however use an html element.

In the html element you’d enter your css between the following style tags. Not sure what css tho

<style>
#elementID{
}
</style>

Hello @vincent.l.arena and welcome to Bubble community.

I used my application in both env. web and mobile (same components). Start to build around mobile first, then you can extend to web. You can start with

10 min. to build a FREE 0$ native iOS/Android app :large_blue_diamond:

A lot of plugins will help you with mobile effects. If you expect a small program, then put everything in the same page. I recommend using multipage for speed and maintenance.