A sticky header in Bubble stays fixed at the top of the viewport while users scroll. You achieve this by placing your header inside a Floating Group set to float relative to Top. This tutorial covers the setup, z-index layering, responsive behavior, and hide-on-scroll patterns.
Overview: Adding a Sticky Header in Bubble
A sticky header keeps navigation visible as users scroll, improving usability. Bubble does not have a native sticky property on regular groups, but the Floating Group element provides this behavior. This tutorial shows you how to configure it correctly with proper layering and responsive design.
Prerequisites
- A Bubble app with a page that has scrollable content
- Basic understanding of Bubble elements and the responsive engine
- An existing navigation bar or header design
Step-by-step guide
Create a Floating Group for the header
Create a Floating Group for the header
In the Design tab, click the + icon and search for Floating Group. Drag it onto your page. In the Property Editor, set Float relative to to Top of page. Set the width to 100% of the page width. Set the height to your desired header height (60-80px is typical). Move all your header elements (logo, navigation links, buttons) inside this Floating Group.
Pro tip: A Floating Group always stays in view — it does not scroll with the rest of the page content.
Expected result: Your header elements are inside a Floating Group that stays at the top of the viewport.
Set z-index to keep the header above content
Set z-index to keep the header above content
Click on the Floating Group. In the Property Editor, find the z-index setting and set it to a high value like 999. This ensures the header appears above all other page content when scrolling. Without a proper z-index, elements like Repeating Groups or images may overlap the header as users scroll.
Expected result: The sticky header stays above all other page content during scrolling.
Add padding to prevent content from hiding behind the header
Add padding to prevent content from hiding behind the header
Since the Floating Group is removed from the normal page flow, the page content starts at the very top and can be hidden behind the header. Add a top margin or top padding to the first content element below the header equal to the header height (e.g., 80px). Alternatively, add an invisible spacer group at the top of the page with the same height as the header.
Expected result: Page content starts below the sticky header with no overlap.
Make the header responsive
Make the header responsive
Select the Floating Group and use the responsive preview to check how it looks on mobile and tablet breakpoints. Adjust the header layout for smaller screens — you may need to collapse navigation links into a hamburger menu icon, reduce logo size, or stack elements vertically. Set responsive conditions to hide/show elements at different breakpoints.
Expected result: The sticky header adapts properly to mobile, tablet, and desktop screen sizes.
Add a shadow or border for visual depth
Add a shadow or border for visual depth
Add a bottom border or box shadow to the Floating Group to visually separate the header from the content below. In the Appearance tab, add a shadow with X:0, Y:2, Blur:4, Color:rgba(0,0,0,0.1). This gives the header a subtle floating effect that indicates it is fixed above the scrolling content.
Expected result: The sticky header has a subtle shadow that provides visual separation from the page content.
Complete working example
1STICKY HEADER SETUP2====================34ELEMENT: Floating Group (StickyHeader)5 Properties:6 - Float relative to: Top of page7 - Width: 100% of page8 - Height: 70px9 - Z-index: 99910 - Background: white (or your brand color)11 - Shadow: X:0 Y:2 Blur:4 Color:rgba(0,0,0,0.1)1213 Contents:14 - Image: Logo (left-aligned)15 - Group: NavLinks (row layout, center/right)16 - Link: Home17 - Link: Features18 - Link: Pricing19 - Link: Contact20 - Button: CTA (right-aligned)2122 Responsive:23 Desktop: full nav links visible24 Mobile: hide NavLinks, show hamburger icon25 → Hamburger click: show/hide mobile menu group2627PAGE CONTENT:28 Spacer Group (below Floating Group):29 - Height: 70px (matches header height)30 - Background: transparent31 - Collapse when hidden: no32 33 OR: First content group top margin = 70pxCommon mistakes when adding a sticky header in Bubble
Why it's a problem: Using a regular Group instead of a Floating Group
How to avoid: Use a Floating Group with Float relative to set to Top of page
Why it's a problem: Forgetting to add padding below the header
How to avoid: Add a spacer or top margin equal to the header height on the first content element
Why it's a problem: Not setting a z-index on the Floating Group
How to avoid: Set z-index to 999 on the Floating Group to ensure it stays above everything
Best practices
- Use a Floating Group with Float relative to Top for sticky behavior
- Set z-index to 999 to keep the header above all content
- Add a spacer or margin below the header equal to its height to prevent content overlap
- Add a subtle shadow for visual depth and separation
- Make the header responsive with a mobile hamburger menu at smaller breakpoints
- Keep the header compact (60-80px) to maximize content viewing area
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I need to add a sticky header to my Bubble.io app that stays at the top when scrolling, has a logo and navigation links, and collapses into a hamburger menu on mobile. How do I set this up?
Add a sticky header to my page. I need a Floating Group at the top with my logo and navigation links that stays fixed when scrolling. Add proper z-index and responsive behavior for mobile.
Frequently asked questions
Can I make the header appear only after scrolling down?
Yes. Use a custom state that tracks scroll position with the Toolbox plugin's Run JavaScript action (window.scrollY). Add a condition on the Floating Group: visible only when scroll_position > 100.
How do I add a mobile hamburger menu?
Add an Icon element (hamburger icon) that is only visible on mobile breakpoints. Its click workflow toggles a custom state that shows/hides a mobile navigation group.
Can I make the header transparent and then solid on scroll?
Yes. Set the Floating Group background to transparent by default. Add a condition: when scroll_position > 50, change the background to white (or your color). Use the Toolbox plugin to track scroll position.
Does a Floating Group affect page performance?
Floating Groups have minimal performance impact. However, complex elements inside them (heavy Repeating Groups, many images) can affect scroll smoothness.
Can I have both a sticky header and a sticky footer?
Yes. Use two Floating Groups — one floated to Top and one to Bottom. Make sure neither has too much height, especially on mobile. RapidDev can help design responsive multi-panel layouts.
How do I link navigation items to sections on the same page?
Use anchor links by scrolling to a specific element. In the link's workflow, add Go to page with the same page and use a URL parameter to identify the section, then scroll to the target group on page load.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation