How to make a header essentially like Bubble Forum's (http://forum.bubble.io/)?

Hello everyone. It’s my first question here. I need some help Bubblers!

The header in question is quite similar to the header here in Bubble Forum.
It’s a header consisting of a 3 layer header:

  • Header 1: is the topmost header. It scrolls out of viewport/disappears upon scrolling down.
  • Header 2 & 3: This is a set of sticky headers. Upon scrolling down, they scroll up simultaneously just like the header containing the Bubble Forum header here behaves.
    Thanks in arears.

I’d highly recommend this tutorial from @rico.trevisan
It’s a no nonsense tutorial on how to set up a Good Bubble app once you are passed the very basics. (and also covers floating headers, menus etc which is what you are talking about)

3 Likes

Thanks @lindsay_knowcode for your prompt assistance.

I have watched all the videos.
And while the contents are invaluable, they don’t address the issue I’m faced with at the moment.

That said, I appreciate your kind gesture.

I’m sorry I sent you on a wild goose chase :frowning_face: so put this together to replicate the forum headers.

https://knowcode-tech.bubbleapps.io/version-test/discourse-headers?debug_mode=true

The basic answer I think lies in making the floating group header visible on the condition that the page scrolling position is > X

I think the “trick” is that header 2 and the floating 3 look the same and tricks you into thinking that header 2 started to “float” - or at least that is how I think I’d approach the problem.

It’s quite neat really, I may start to use it myself! :slight_smile:

About Me

I’m a Bubble Freelancer. I like Bubble coaching and making plugins for tricky API’s.

My Bubble plugins Pleased to say all 5* reviews.
My Coaching nocodeguides.io DM me for a free voucher code if you want a quick chat.
My Youtube Channel Mostly about my plugins.
My Freelancing Website

@lindsay_knowcode

3 Likes

Awesome! Thanks very much! This is what I was looking for! :+1:

1 Like

cool - I’ll move this into “tips” category

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.