Floating Group Sticky Mobile Menu Fixes & Browser Compatibility

[samnichols]

I was having issues with behavior on some mobile browsers when using a Floating Group as a sticky/fixed bottom menu for phones. Here’s what it was doing on phones for me:

1. On Opera mobile, the bottom menu was coming up 30-50px from the bottom of the screen when you scroll, especially if you scrolled quickly.
2. On Opera and Chrome, the bottom menu was only visible if you scrolled down, then stopped scrolling. On page load, it was hidden, and if you scrolled up, the bottom menu became hidden below the bottom of the screen.
3. On Brave, since they have their own bottom menu, the CSS fix I tried to fix #s 1 and 2 made it so that the bottom menu was ALWAYS hidden behind Brave’s menu

All I wanted was a bottom mobile menu that was always sticky and never moved at all. This is what I did to make it happen:

1. Add mobile_bottom_menu to the ID field of your Floating Group
   

2. Go to Settings > SEO/metatags > Script in the body and paste this in:
   [add an opening style tag if needed]
   #mobile_bottom_menu {
   top: unset !important;
   bottom: 0 !important;
   margin: unset !important;
   position: fixed !important;
   }
   [add a closing style tag if needed]

Now I have a nice bottom menu similar to a native-app:

The above CSS fixed the issue on Opera, Brave, and Chrome for me. Safari still works fine, as well.

NOTE: I hate using !important, but Bubble’s own CSS was overriding mine, so that’s life I guess, lol.

Hopefully this is helpful!

[brulard.marc]

Hi Sam,

Thank you for sharing this solution with the rest of us !

I tried to implement it in my app but I still have the issue on Chrome. When scrolling, chrome’s bottom menu is hidden but doesn’t collapse. Leaving a gap between my mobile menu and the bottom of the page.

Any idea how I could make my mobile menu stick to bottom anyway ?

Thank you

[GH5T]

This is my result with vanilla settings. Floating group.

No CSS or plugins needed.

[brulard.marc]

Hi !

Thank you for your answer.

I have the same settings as you, but still getting the issue. Have you tried to open your app in google chrome on an iPhone ? With a page that is higher than page height.