Centered with Floating Header and Sidebar

Need help Responsiveness
1

Hey guys,

I thought I had a nice layout worked out where a header and sidebar float and a body element scrolls, then everything centered and fixed. Once I had everything set up I realized the floating group was blocking input elements below it.

All along I’ve felt like I’m over-complicating the concept and could accomplish everything better with responsiveness, but haven’t come up with anything yet. Thought I’d see what you guys think.

Here’s the editor:

2

Hello
you can use pointer-events: none; on the parent group and pointer-events:all;
on the children. In this video you will see the floating group cookies has pointer event none while is children group has all, Allowing it to partially float over.



https://storywall.app/version-test/id/kiki

4 Likes
3

Interesting! Where/how do you apply the CSS?

4

I have adjusted the test app for you. I had to use a js on page load as the page is not on a paid plan and therefor you can’t apply custom html headers on it.

Normally you would do the following:

  1. Under Settings -> General, activate the option to expose attribute ID’s
  2. Add a custom attribute ID to the floating group (as I did with the “float1” ID)
  3. Insert

<style> #float1{pointer-events:none !Important}</style>

in the custom html header options in Bubble.

3 Likes
5

Thank you!