Floating Group Sticky Mobile Menu Fixes & Browser Compatibility

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 :expressionless:

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
    Screen Shot 2022-04-16 at 12.51.41 AM

  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:
Screen Shot 2022-04-16 at 12.45.50 AM

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! :slight_smile: