Streaming live at 10am (PST)

Fixed header section with 100vh flex positioning

Hey Webflow Friends!

I’m trying to get a header section with a flex positioning set to 100vh to also be set to a fixed positioning so that the content below “scrolls over” the header section, like in this example:

I guess I would need to add a top margin to the section below (mainSection) equal to the height of the headerSection, but how do I get the exact height of the headerSection since its 100vh and depends on the height of the viewport? Would I do this with some jQuery of some sort?

And is this the correct way to achieve what I’m looking for?


Here is my site Read-Only:
(how to share your site Read-Only link)

Salut Joel
(tu es de Montréal)?

Voici un démo qui reproduit l’effet que tu recherches:


Here’s a quick demo:


Clone Link:


Just add a top padding to the body that’s 100vh.

Super, merci Philippe!
Et oui je suis de Montréal, toi aussi?

Thanks @Cricitem! Hadn’t thought about that!

1 Like

Oui, Montréal aussi.
Toujours cool de rencontrer des gens du coin qui utilise les mêmes outils!

@philippe Bien d’accord! Au plaisir de se rencontrer un jour!

1 Like