Hello Bubble community,
Sorry another simple question: how to create a fix header? I mean the header remain at the top of the page, and you can scroll the rest of it.
Thanks, it will be my last question for today 
Vincent
Thereās two different ways to do this:
-
If you just want a simple header , you can insert a stripe at the top of the page and click the option to have it float at the top of the page. You can even create your own header image and upload it here if you want to.
-
Create a floating group that stretches across the top of the page and have it float at the top. You can drop your logo, log in/log out links, etc. in this group. Best practice here is probably to put your floating group in a resuable element so that you can just drop it on multiple pages.
The second option is probably best, as it gives you more control in the customization of your header.
4 Likes
Many thanks!
1 Like
Hi.
Iāve tried 2nd way multiple times, but it doesnāt seem to work for me.
When I create floating group on a selected page and drop logo etc there it works fine. Then I select everything and create new reusable element. Then I put this reusable element on other pagesā¦but it doesnāt float at the top of the page:(
What do I do wrong?
p.s. just copy-pasting the header from one page to another works fine, but I suppose creating reusable element is better anyway.
When you convert a floating group into a reusable element, it becomes a regular group. What you have to do now is place the reusable element into a floating group on each page you intend to use the reusable element.
2 Likes
Scott, thnx
Now I see.
Funny I thought you were asking a question I have been meaning to askā¦
How to create a report header that stays on each page?
Has anyone created a report (sent to document, screen or printer) spanning more than one page that required a header to be displayed on the other pages?
Hi Scott, what would you say is the best route to enable in a fully finished format? Tried to implement with the floating header, but it seems to not mesh unless if I have the other properties you have?
Thanks!
I canāt anticipate what issue youāre having exactly. Could you describe in detail the expected behavior as well as what is actually occurring? That might help me understand the scenario and figure out what you would need to do.
1 Like
when I scroll up, the entire page does, not the element. I want the header to stick onto the stripe, thanks!
You need to put the Header inside the Floating Group.
Having a Floating Group in the Header, then putting the Header on the page ā¦ bursts the magic balloons 
Have made the change for you.
1 Like
You are incredible good sir, Thank you 
1 Like
It seems like itās impossible to imbed a reusable element inside of a floating group. However, on the flip side - I was able to put floating group inside of the header, and then the header (as a reusable element) onto the page.
I am trying to using the header as a navigation bar for my native app (i.e. I need to start/edit workflows with elements that are inside of each page, and not just the header). As described by @Scott and @NigelG, I have a reusable element, which is a floating group (containing a few buttons) inside of a header. Then I go back to my page and attempt to insert the re-usable element (i.e. the header with the floating group) into a new floating group on the page. After many many attempts, I cannot seem to accomplish this.
How on earth did you get your header inside of the floating group @Scott?
You can set the group type of the reuseable element to floating group.
Here are a couple headers I previously made for someone in another thread.
1 Like
That worked for getting the reusable element converted into a floating group, thanks! For those interested, I selected the reusable element and under edit clicked āreplace by another elementā and then selected āFloating Group.ā
The challenge now is to modify the buttons that are inside of the reusable element. I still have to go back to the header page (which wonāt allow me to execute workflows on the page where the header is now placed as a floating group). Any idea here?
Use custom states on the reuseable header. They are accessible at the page level.
2 Likes
Definitely making progress here: I created custom states at the headerās page (called state1 and state2). When I go back into the page that utilizing the header as a reusable elementā¦there doesnāt appear to be a way to access the custom states defined in the headerās page (i.e. state1 and state2):
Just for reference, the re-useuable element is inside of Floating Group A. How do we access page level states?
You cannot access page level states. Thatās why you need to set it on the reusable element itself.
1 Like
How do I make it so that the header changes colour after scrolling below a full-width image that is right below the header?
I recommend creating a new topic for this question. Itāll help other users with a similar problem find the answer once itās solved.