How to add a sticky header in Bubble

A sticky header in Bubble is created by putting your header group into Floating group and setting it to float relative to Top. This makes the header stay visible while the page scrolls.

How to Set Up a Sticky Header in Bubble

The simplest and most stable way to make a header stay at the top while the user scrolls is to use a Floating group. A floating group is a Bubble container that stays fixed in place relative to the browser window, not the page content. When you float it relative to the top, it becomes a true sticky header. This method works perfectly with both the old responsive engine and the new responsive engine.

• Create or select your existing header group (the bar that contains your logo, menu, icons, etc.).
• Right‑click it and choose Convert into a floating group. If it’s new, just drag a Floating group from the Visual Elements panel onto the page.
• In the floating group’s property editor, set Floating relative to: Top. This is the key setting that locks it to the top of the screen.
• Set the Width to match your page width settings (for example, check Make this element fixed‑width or use Stretch to parent depending on your layout).
• Set Background color so content behind it doesn’t show through when the page scrolls.
• Make sure the floating group is placed at the very top of the page canvas so Bubble knows it is the top header.

Once this is set, the header will remain visible as the user scrolls down the page. No workflows or custom code are needed.

Optional: Adding Drop Shadow on Scroll (CSS)

If you want the sticky header to get a shadow when the page scrolls, you can use an HTML element. This is optional and does not affect the stickiness itself.

<style>
#myheader {
  transition: box-shadow 0.3s;
}
.scrolled #myheader {
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
</style>

<script>
// Adds a shadow class when scrolling
window.addEventListener('scroll', function() {
  if (window.scrollY > 10) {
    document.body.classList.add('scrolled');    
  } else {
    document.body.classList.remove('scrolled');
  }
});
</script>

Apply the ID myheader in the floating group’s ID attribute field (requires Bubble's “Expose the option to add an ID attribute” in Settings → General).