Forum Academy Marketplace Showcase Pricing Features

How to create a fixed header

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 :smile:
Vincent

There’s two different ways to do this:

  1. 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.

  2. 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.

3 Likes

Many thanks!

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.

1 Like

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 :slightly_smiling:

Have made the change for you.

1 Like

You are incredible good sir, Thank you :slight_smile:

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.