Floating group sidebar sticks to the left

[lipshow]

Hi all, I built a floating header + sidebar.

On small screens it is perfect:

On the large ones it is not so great:

Here is what I am looking for. A bit like twitter:

Link to editor:

Bubble Editor - Nomad22

Appreciate the time, thank you, I’ll buy a coffee for whoever has the golden answer!

Cheers,
Lip

[josh24]

Hey Lip,

Totally doable but you can’t use a floating group for the sidebar as floating groups need to snap to the edge of the page, and instead need to put the sidebar in a group with the content area of the page and use a tiny bit of custom css to make it all work. You will still use a floating group for the header though.

High-level process is like this:

1. Putting in some custom css that will fix the page to the browser window and prevent scroll.

2. Fixing the position of the sidebar

3. Allowing scroll on content area of the screen

You would need to expose the option to add an ID attribute to HTML elements on the general settings page first if you haven’t already

Then you’ll need to put the following CSS in the page HTML header and tag the relevant groups

<style>
.main-page {
    height: 100vh !important;
    width: 100vw !important;
}

#menu {
    position: fixed !important;
    overflow: hidden !important;
}

#content {
      overflow-y: scroll !important;
}
</style>

To see exactly how I’ve set the page up and done everything - I’ve dropped it into a separate Bubble app and given public view access. You can see it here

Bubble Editor - Supportdept-test-app

If you need some help putting it into practice, then book some time with me and we can do it together on a zoom call

Josh @ Support Dept
Helping no-code founders get unstuck fast save hours, & ship faster with an expert on-demand

[lipshow]

Hi Josh, thanks so much for your help!

I followed your instructions and built this one:

Everything works except for the sidebar. I would like it to be twitter-like and stay anchored to the top. So that if users are scrolling main content and open the sidebar menu, the menu options are always right there on top of the screen. Does that make sense?

Cheers! Who has the magic!? (editor link)

---

*Update 10 mins later: I adjusted the main group height to fixed 100% and removed the minimum height from the page element. Since all the content will be in repeating groups I can have users scroll through those instead and have them grow in line with page height. Going to mark this as solved!

Result:

Cheers @josh24 !