# Floating Group within a Group as Header, Side Menu? **URL:** \ **Category:** Responsiveness\ **Created:** [September 22, 2023, 1:46am UTC](https://forum.bubble.io/t/floating-group-within-a-group-as-header-side-menu/284744 "2023-09-22T01:46:10Z")\ **Posts on this page:** 17\ **Page:** 1
**Author:** ![calicass83](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/calicass83/32/181870_2.png) [@calicass83](https://forum.bubble.io/u/calicass83)\ **Post date:** [September 22, 2023, 1:46am UTC](https://forum.bubble.io/t/floating-group-within-a-group-as-header-side-menu/284744/1 "2023-09-22T01:46:10Z")
So, I am trying to set up my pages like this - with a sticky floating header on the top, sticky floating group on the left as a menu (so only the content in the blue section scrolls) - but is there any other way to set it up with using floating groups for both? I’d love to be able to put a floating group within a group so that the other elements always maintain their distance, without having to setup conditionals on each page. Reason being, my header will sometimes be thicker on some pages than others, so I would like for the blue group to always adjust for that and maintain 20px from the header, menu, and footer. ![image](https://us1.discourse-cdn.com/bubble/original/3X/2/3/234a66834e2a98bb42bbd960f546fdb37d388495.png) ---
**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:** [September 22, 2023, 6:08am UTC](https://forum.bubble.io/t/floating-group-within-a-group-as-header-side-menu/284744/2 "2023-09-22T06:08:00Z")
In my apps I use my plugins that are on the marketplace. > **[Float a' Element Plugin for Bubble, by Boston85719](https://bubble.io/plugin/float-a-element-1657038969959x941986565519310800)** > > Float a' Element Plugin page on Bubble, by Boston85719. Add Float a' Element in one click to your app. Bubble lets you build web apps without any code. > **[Dynamic Width and Height Plugin for Bubble, by Boston85719](https://bubble.io/plugin/dynamic-width-and-height-1657102625296x592334617614745600)** > > Dynamic Width and Height Plugin page on Bubble, by Boston85719. Add Dynamic Width and Height in one click to your app. Bubble lets you build web apps without any code. I use the dynamic width and height plugin to get the page height and then to set dynamically the height of my target elements which can use the heights of other elements as well as other values you input (such as the gap or margins between elements) to get the exact height of the target element to fit perfectly into the view. This target group can be scrolled if you set it to, while the page would not. The float a element plugin allows me to put a group inside of another container (such as a floating group) and make that group be a floating group (can set conditionally as well) so that when a user scrolls my left menu, the header of the left menu remains at the top (perfect for continuous display of selected filters while the user scrolls the entire filter section…or header of a product display as the user scrolls the product, or the image gallery - basically, I use it a lot to get elements to float wherever and however I want them to.) ---
**Author:** ![sudsy](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sudsy/32/114637_2.png) [@sudsy](https://forum.bubble.io/u/sudsy)\ **Post date:** [September 22, 2023, 11:48am UTC](https://forum.bubble.io/t/floating-group-within-a-group-as-header-side-menu/284744/3 "2023-09-22T11:48:08Z")
Hi @calicass83, Is the footer always a fixed height? Also, what’s the page supposed to look like on mobile? ---
**Author:** ![calicass83](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/calicass83/32/181870_2.png) [@calicass83](https://forum.bubble.io/u/calicass83)\ **Post date:** [September 22, 2023, 2:30pm UTC](https://forum.bubble.io/t/floating-group-within-a-group-as-header-side-menu/284744/4 "2023-09-22T14:30:48Z")
I think the float a element may work for my use case, any chance I can get a refund if for some reason I find it doesn’t? ---
**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:** [September 22, 2023, 2:31pm UTC](https://forum.bubble.io/t/floating-group-within-a-group-as-header-side-menu/284744/5 "2023-09-22T14:31:51Z")
> [@calicass83](#): > > any chance I can get a refund if for some reason I find it doesn’t? You can use the subscribe feature to test it out, and then if it doesn’t work for your use case, you can unsubscribe. ---
**Author:** ![calicass83](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/calicass83/32/181870_2.png) [@calicass83](https://forum.bubble.io/u/calicass83)\ **Post date:** [September 22, 2023, 2:32pm UTC](https://forum.bubble.io/t/floating-group-within-a-group-as-header-side-menu/284744/6 "2023-09-22T14:32:14Z")
Yes, the footer will always remain fixed height. The mobile page will not have the left menu. Currently, I have it set up so that a groupfocus appears on click of a mobile menu. ---
**Author:** ![calicass83](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/calicass83/32/181870_2.png) [@calicass83](https://forum.bubble.io/u/calicass83)\ **Post date:** [September 22, 2023, 6:16pm UTC](https://forum.bubble.io/t/floating-group-within-a-group-as-header-side-menu/284744/7 "2023-09-22T18:16:26Z")
I’m not sure if I have it set up right - can you take a look? > **[Bubble Editor - Raising-Anchors](https://bubble.io/page?type=page&name=test&id=raisinganchorsnew&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. Group menu, group header, and group footer are supposed to float/stay put, while group content is the only group that scrolls. ---
**Author:** ![sudsy](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sudsy/32/114637_2.png) [@sudsy](https://forum.bubble.io/u/sudsy)\ **Post date:** [September 22, 2023, 7:16pm UTC](https://forum.bubble.io/t/floating-group-within-a-group-as-header-side-menu/284744/8 "2023-09-22T19:16:13Z")
Hey @calicass83, Can you explain what you mean by the header “sticks to the top of the page and moves down as user scrolls”? How can it stick to the top AND move down? 😕 ---
**Author:** ![calicass83](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/calicass83/32/181870_2.png) [@calicass83](https://forum.bubble.io/u/calicass83)\ **Post date:** [September 22, 2023, 7:33pm UTC](https://forum.bubble.io/t/floating-group-within-a-group-as-header-side-menu/284744/9 "2023-09-22T19:33:27Z")
Sorry - the header acts as a floating group and sticks to the top of the page, so that when the user scrolls down, it’s always visible. ---
**Author:** ![sudsy](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sudsy/32/114637_2.png) [@sudsy](https://forum.bubble.io/u/sudsy)\ **Post date:** [September 22, 2023, 9:35pm UTC](https://forum.bubble.io/t/floating-group-within-a-group-as-header-side-menu/284744/10 "2023-09-22T21:35:33Z")
If I understood correctly, here’s one way to go about it… https://player.vimeo.com/video/867333214   It’s 100% pure Bubble and doesn’t use any floating groups. Instead, the blue group in the middle is set to scroll when the content exceeds its height. The only real downsides are: - If there’s lots of content to add to the scrolling group, the editor (UI builder) page height might have to be temporarily increased to get more vertical real estate in design mode. - The **Scroll to an element** action doesn’t work, since it’s not actually the page that’s scrolling. Anyway, if you think it might be useful, PM me and I’ll send a link to the editor so you can copy/paste it into your own app. There might be another workable approach which would use the page itself for scrolling. If I get a chance, I’ll look into that. Anyway, good luck. 🙂 ---
**Author:** ![calicass83](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/calicass83/32/181870_2.png) [@calicass83](https://forum.bubble.io/u/calicass83)\ **Post date:** [September 22, 2023, 9:51pm UTC](https://forum.bubble.io/t/floating-group-within-a-group-as-header-side-menu/284744/11 "2023-09-22T21:51:51Z")
That could be very useful! I’d love to give it a try. Thanks! ---
**Author:** ![sudsy](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sudsy/32/114637_2.png) [@sudsy](https://forum.bubble.io/u/sudsy)\ **Post date:** [September 23, 2023, 3:38am UTC](https://forum.bubble.io/t/floating-group-within-a-group-as-header-side-menu/284744/12 "2023-09-23T03:38:09Z")
> [@sudsy](#): > > There might be another workable approach which would use the page itself for scrolling. If I get a chance, I’ll look into that. So I had a chance to noodle on this, and here’s an approach that uses three floating groups and the actual page scrolling behavior (not a scrollable group) which means the **Scroll to an element** works. Again, this is 100% pure Bubble. [![](https://i.vimeocdn.com/video/1728023643-e848131d27d76f4a9ea5aa3b5260b2947e8eeaf0ccae8a629e4debbceeeb1769-d?f=webp "scrolling-center-content-2") ](https://vimeo.com/867390286)   Additionally, there are no special design mode considerations. The entire page is in viewable and editable. Personally, I prefer this approach over the previous, but I’d probably create reusable elements, and I think I’d ditch the scrollbars in favor of end faders (to indicate additional scrollable content). Anyway, not sure if this meets all the requirements but wanted to share an alternative approach. ---
**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:** [September 23, 2023, 6:22am UTC](https://forum.bubble.io/t/floating-group-within-a-group-as-header-side-menu/284744/13 "2023-09-23T06:22:21Z")
Looks like you are not using the plugin in the way it is meant to be used. It is meant to make groups into floating groups when a floating group element is not a possible choice, like when it is contained by another group. In your setup, you can simply have the header as a floating group element and the side menu as a floating group element. I thought from the title of the post Floating Group within a Group as Header, Side Menu that you were looking for a way to make it so you could get sa functionality, where you have a side menu, and inside of the side menu, you have a header and want that to float as the side menu is scrolled. My plugin is made to overcome a built in limitation of the floating group element, which is it has to live on the page and can not be contained by other container elements. From the page setup in your editor, that is not how you are attempting to use it. In your editor, you should just make the header and side menu floating group elements as they are on the page and not contained by another container, and if they are likely should not be. ---
**Author:** ![calicass83](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/calicass83/32/181870_2.png) [@calicass83](https://forum.bubble.io/u/calicass83)\ **Post date:** [September 26, 2023, 9:43pm UTC](https://forum.bubble.io/t/floating-group-within-a-group-as-header-side-menu/284744/14 "2023-09-26T21:43:46Z")
I got charged $69.23 for trying this out for less than a day. Can you refund me? I can’t use it for what I thought it would do for me. ---
**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:** [September 27, 2023, 6:15am UTC](https://forum.bubble.io/t/floating-group-within-a-group-as-header-side-menu/284744/15 "2023-09-27T06:15:27Z")
> [@calicass83](#): > > Can you refund me? I didn’t charge you as I don’t run the Bubble Marketplace. You need to contact Bubble about refunds for their marketplace. > [@calicass83](#): > > I got charged $69.23 for trying this out for less than a day. I don’t think that would be the case as the plugin only costs $10/month and $25 one time. If Bubble charged you $69.23 then, Bubble must have an issue in their system and you would need to contact Bubble support about it. ---
**Author:** ![rakanali.rk](https://avatars.discourse-cdn.com/v4/letter/r/aca169/32.png) [@rakanali.rk](https://forum.bubble.io/u/rakanali.rk)\ **Post date:** [January 12, 2024, 8:38pm UTC](https://forum.bubble.io/t/floating-group-within-a-group-as-header-side-menu/284744/16 "2024-01-12T20:38:58Z")
Hello Sudsy, I hope you are doing well! Can you please share with us how to achieve this? Best Regards ---
**Author:** ![sudsy](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sudsy/32/114637_2.png) [@sudsy](https://forum.bubble.io/u/sudsy)\ **Post date:** [January 14, 2024, 11:31pm UTC](https://forum.bubble.io/t/floating-group-within-a-group-as-header-side-menu/284744/17 "2024-01-14T23:31:20Z")
> [@rakanali.rk](#): > > Can you please share with us how to achieve this? Hi Rakanali, There are at least three different ways to go about it, two of which are depicted in this thread. The first uses the **Allow vertical scrolling when content overflows** option of a group. In that case, it’s only the group that’s scrolling. The second uses floating groups for header, footer, and sidebar (which remain in a fixed position on the page), so it’s actually the page that’s scrolling. Anyway, if you have specific requirements, feel free to message me directly (click on my avatar), and I’d be happy to discuss further. Regards, -Steve