Header design functionality

Hello!

Hope everyone is doing well. I am curious to know if anyone on here knows how to achieve the following header functionality. Love it and want to replicate it for my app. Much appreciated for the help!!!

Video Link: Loom | Free Screen & Video Recording Software | Loom
Inspiration Website Link: Senior Manager & Tax Counsel - Nuvei

Hey @nazostro ,

You have to make the header a reusable element. Make a header using a floating group and set the group background to none.

Set the condition of the group as shown in the screenshot
condition

If any further assistance is required get in touch with me on:
LinkedIn:- Karamjit Singh - Aprintaa - Rank First To Earn Fast! | LinkedIn
Gmail:- karamwise@gmail.com

Hey @karamwise! Thank you for the information!!

And does that allow me to have it as a stick header where the top part disappears but the bottom bar stays put at the top??

Here you go:

Editor: Dogmatchsystem2022 | Bubble Editor

Preview: Your Bubble app

Hey @nazostro ,

Yes, this will allow you to stick the header. You need to set conditions for the top part when the current page scroll in position then this element should not be visible.

If any further assistance is required get in touch with me on:
LinkedIn:- https://www.linkedin.com/in/karamjitsinghwaldi
Gmail:- karamwise@gmail.com

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