Forum Academy Marketplace Showcase Pricing Features

How to achieve this header?

Hey Bubblers, can anyone help to understand how to achieve this where the floating group (red repeating horizontal group) stays fixed on scroll to the top? thanks

https://www.livenation.es/

1 Like

Hi Niki! :wave:

I think I might’ve met you at a Buildcamp workshop.

Anyway, here’s what I put together in a few minutes using some Frames content…

The basic idea is to have 2 copies of the header on the page and conditionally show one or the other depending on the page scroll position.

I just used a couple of Frames headers and removed a bit of space from the top and bottom (since they aren’t for a marketing / landing page).

I converted the red one into a reusable element (not necessary but smart) and wrapped one copy in a floating group.

fixed-header

The best part is that the result is fully responsive down the 320 pixels with no additional effort on my part! :+1:

-Steve

3 Likes

Hey Steve,
Great to connect again! :slight_smile: thank you for taking the time to illustrate the solution, highly appreciate!