# šŸ† HELP: Floating Group sidebar like Twitter (GIF included) **URL:** \ **Category:** Responsiveness\ **Created:** [December 15, 2020, 5:49pm UTC](https://forum.bubble.io/t/help-floating-group-sidebar-like-twitter-gif-included/125922 "2020-12-15T17:49:18Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![wesfrank](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/wesfrank/32/79725_2.png) [@wesfrank](https://forum.bubble.io/u/wesfrank)\ **Post date:** [December 15, 2020, 5:49pm UTC](https://forum.bubble.io/t/help-floating-group-sidebar-like-twitter-gif-included/125922/1 "2020-12-15T17:49:18Z")
This has been a 6+ hour, incredibly frustrating situation. Iā€™m trying to make a simple sidebar dashboard like Twitter in where it floats on the screen but sticks to a scrolling group in the middle. Please see the video below and keep an eye on the two sidebars as I zoom out and in. ![ezgif-1-8df4ec2cefcb](https://us1.discourse-cdn.com/bubble/original/3X/7/9/79a2fa0f4825655c36b465d435fbce819adf3d59.gif) This is what Iā€™ve tried and what DOESNā€™T work (along with the reason why it doesnā€™t work): - A Floating Group on the left and right side (Floating Groups stick to the edges of the screen and do not stick to the middle) - One large Floating Group that stretches across the screen and then having fixed-width groups inside as the sidebars (you canā€™t click elements underneath a transparent Floating Group which makes the middle group unusable) \*A ā€œbeneath the pageā€ Floating Group and then have the main page transparent (you canā€™t click elements in a Floating Group beneath the page even though the full page is transparent) - A Group Focus attached to the header (the Group Focus closes whenever you click anywhere on the page) - Float relative too Plugins (It glitches, groups donā€™t appear, etc.) This would all be solved if transparent Floating Groups behaved like transparent regular Groups. But there must be a reason why you canā€™t through Floating groups? Any ideas on how to achieve this? Thank you ---
**Author:** ![rijk-db](https://avatars.discourse-cdn.com/v4/letter/r/9de053/32.png) [@rijk-db](https://forum.bubble.io/u/rijk-db)\ **Post date:** [December 15, 2020, 5:51pm UTC](https://forum.bubble.io/t/help-floating-group-sidebar-like-twitter-gif-included/125922/2 "2020-12-15T17:51:25Z")
Pretty easy, just change ā€œVertically float relative toā€ to ā€œBothā€. Should work. ---
**Author:** ![wesfrank](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/wesfrank/32/79725_2.png) [@wesfrank](https://forum.bubble.io/u/wesfrank)\ **Post date:** [December 15, 2020, 5:57pm UTC](https://forum.bubble.io/t/help-floating-group-sidebar-like-twitter-gif-included/125922/3 "2020-12-15T17:57:05Z")
It doesnā€™t- having it float vertically is not the issue. Itā€™s having it stick to a proper horizontal reference (having it stick to the middle column like in the GIF) ---
**Author:** ![rijk-db](https://avatars.discourse-cdn.com/v4/letter/r/9de053/32.png) [@rijk-db](https://forum.bubble.io/u/rijk-db)\ **Post date:** [December 15, 2020, 6:20pm UTC](https://forum.bubble.io/t/help-floating-group-sidebar-like-twitter-gif-included/125922/4 "2020-12-15T18:20:24Z")
Ahhh, okay. Well, no idea how to help you there. If I recall correctly, Iā€™ve tried that before, but failed. ---
**Author:** ![wesfrank](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/wesfrank/32/79725_2.png) [@wesfrank](https://forum.bubble.io/u/wesfrank)\ **Post date:** [December 15, 2020, 10:09pm UTC](https://forum.bubble.io/t/help-floating-group-sidebar-like-twitter-gif-included/125922/5 "2020-12-15T22:09:31Z")
No problem, thanks for offering a suggestion though! ---
**Author:** ![wesfrank](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/wesfrank/32/79725_2.png) [@wesfrank](https://forum.bubble.io/u/wesfrank)\ **Post date:** [December 16, 2020, 4:15pm UTC](https://forum.bubble.io/t/help-floating-group-sidebar-like-twitter-gif-included/125922/7 "2020-12-16T16:15:13Z")
What do you mean by ā€œfake itā€? Thanks šŸ™‚ ---
**Author:** ![boston85719](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/boston85719/32/77286_2.png) [@boston85719](https://forum.bubble.io/u/boston85719)\ **Post date:** [December 16, 2020, 4:52pm UTC](https://forum.bubble.io/t/help-floating-group-sidebar-like-twitter-gif-included/125922/8 "2020-12-16T16:52:42Z")
A couple different things you could do that I can think ofā€¦ 1. Install the free classify plugin and add CSS to make a regular group behave as a floating group (requires some knowledge of CSS) 2. Install the paid plugin by BDK which is a floating group plugin to allow you to turn any element into a floating element. > **[Floater (bdk) Plugin for Bubble](https://bubble.io/plugin/better-floater-1519462062405x558542008850841600)** > > Floater (bdk) Plugin page on Bubble. Add Floater (bdk) in one click to your app. Bubble lets you build web apps without any code. The reason you are having a hard time with this setup as you are trying it, is because it is impossible (at least from my frustrating weeks spent trying to do similar) with a floating group element provided by Bubble because that floating element is ā€˜connectedā€™ to the page and is not capable of being contained by other elements except the page and therefore can not be ā€˜connectedā€™ to other elements on your page. ---
**Author:** ![wesfrank](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/wesfrank/32/79725_2.png) [@wesfrank](https://forum.bubble.io/u/wesfrank)\ **Post date:** [December 17, 2020, 5:33pm UTC](https://forum.bubble.io/t/help-floating-group-sidebar-like-twitter-gif-included/125922/9 "2020-12-17T17:33:12Z")
Thanks so much for the direction @boston85719 - I was hoping this could be achieved without a plugin but oh well. At least I know that itā€™s not possible with the current Bubble tools. This will stop my long manhunt into a solution! haha ---
**Author:** ![duke.severn](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/duke.severn/32/38191_2.png) [@duke.severn](https://forum.bubble.io/u/duke.severn)\ **Post date:** [December 17, 2020, 7:22pm UTC](https://forum.bubble.io/t/help-floating-group-sidebar-like-twitter-gif-included/125922/10 "2020-12-17T19:22:02Z")
> [@wesfrank](#): > > I know that itā€™s not possible with the current Bubble tools @wesfrank No you donā€™t šŸ˜‰ Never give up šŸ˜“ šŸ¦¾ šŸ’Ŗ. > [@Floating group is stuck on left side of the screen](http://forum.bubble.io/t/floating-group-is-stuck-on-left-side-of-the-screen/66694/3): > > FLs are tough to deal with responsively because they have no concept of whatā€™s going with other elements. If I have to, I usually link them to a page-level element (bumper). If you can make a bumper at the page level behave, you can id it ā€œbumpā€, id your REU as fl\_left and use this code: $(window).resize(function(){ s = $('#bump').parent().position(); $('#fl\_left').css('left' , s.left + 'px'); }); Donā€™t forget to run the inside of the function on page load. Depending on your setup you migā€¦ Just put the ā€œbumpā€ group off the left or inside another master. Try a few times and if it still doesnā€™t work Iā€™ll make you a tutorial šŸ™‚ ---
**Author:** ![boston85719](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/boston85719/32/77286_2.png) [@boston85719](https://forum.bubble.io/u/boston85719)\ **Post date:** [December 18, 2020, 5:19am UTC](https://forum.bubble.io/t/help-floating-group-sidebar-like-twitter-gif-included/125922/11 "2020-12-18T05:19:14Z")
Does this allow to use a floating group on the right side of the screen or position anywhere on page without overlapping other elements? This would be great to add a floating group to the right of the screen and ā€˜bumpā€™ it from the right margin. I took a look at the editor in the linked postā€¦the right side short group would be great to float and I personally tried to find a way to do something like that without a plugin. Would this method work to do that? _ **Edit** _ Just had a play around, and it seems like it does > **[Bubble Editor - Blurimagesdirectly](https://bubble.io/page?type=page&name=floating_right&id=blurimagesdirectly&tab=tabs-1)** > > Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications. Thanks for this @duke.severn ---
**Author:** ![duke.severn](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/duke.severn/32/38191_2.png) [@duke.severn](https://forum.bubble.io/u/duke.severn)\ **Post date:** [December 18, 2020, 3:17pm UTC](https://forum.bubble.io/t/help-floating-group-sidebar-like-twitter-gif-included/125922/12 "2020-12-18T15:17:32Z")
Indeed, you can readjust it to any element on resize, regardless of where that element is šŸ™‚ ---
**Author:** ![wesfrank](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/wesfrank/32/79725_2.png) [@wesfrank](https://forum.bubble.io/u/wesfrank)\ **Post date:** [December 18, 2020, 4:31pm UTC](https://forum.bubble.io/t/help-floating-group-sidebar-like-twitter-gif-included/125922/13 "2020-12-18T16:31:35Z")
@duke.severn So I did come across your solution during my research but ignored it because the preview didnā€™t quite do what I needed. The floating groups on the sides still stuck relative to the sides on zoom out. Bumping the floating group from the edges isnā€™t an issue though overlapping elements is - this solution moves us one step closer. I need it to stick relative to the center group. Can you tell me what each editable part of your code snippet does and where I can change it to possibly make it work? Iā€™ve tried a few things but still no luck. (Iā€™m not a programmer but can usually hash things out) Hereā€™s the editor: > **[Bubble Editor - Testing912387182937](https://bubble.io/page?type=page&name=test_page&id=testing912387182937&tab=tabs-1)** > > Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications. Thanks šŸ™‚ ---
**Author:** ![wesfrank](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/wesfrank/32/79725_2.png) [@wesfrank](https://forum.bubble.io/u/wesfrank)\ **Post date:** [December 22, 2020, 4:17pm UTC](https://forum.bubble.io/t/help-floating-group-sidebar-like-twitter-gif-included/125922/14 "2020-12-22T16:17:08Z")
Just going to bump this one more time before I move on