LoginGet started — it’s free
Made in Webflow

Overlapped Header Effect

site profile thumbnail


I created this effect to help someone out on the Webflow Discord, and I thought I'd make it cloneable in case anyone else wants to use it! I also decided to spice it up a little with some lovely animations from Lottieflow :) The basic effect is achieved just by setting the header as fixed at a lower z-index than the (relative positioned) content below.
Feeling inspired?If this Made In Webflow site sparked some inspo, why not get started on a project of your own? Clone a site, purchase a template or start building from scratch.
clonableheaderoverlapoverlappedhiddenanimationlottieflowlottieinteractionscrollscrolleffectscrolleffectscoverfrycloneleedsunited kingdomengland

More by Joshua Fry

See profile
View details
Randomly Order Cards (with CMS)
© 2022 Webflow, Inc. All rights reserved.