Sticky-nav and fill-available hero container help

Hey everyone! I’m hoping one of the Webflow wizards might have an idea or two on how to approach this problem I’m having?

End goal:
To have the hero section and nav-bar 100% visible on all device screens on load. On scroll, the navbar must stick to the top of the page when it reaches that point.

The setup:
I have a .fill-available hero container set up so that both the hero image + copy and the navbar are 100% visible ‘on-load’ on different screen sizes, un-obscured by browser UI overlays.

I would like my .sticky-nav to be at the bottom of the fill-available [hero] container and to remain visible on page load across screen sizes. On scroll, I would like the .fill-available container to scroll up as usual, and the .sticky-nav to stick to the top of the body when it reaches that point.

The problem:
I’m struggling to achieve both objectives — navbar sticky to the top of body, and fill-available container 100% visible on-load. In the current example, I have placed .sticky-nav inside my hero .fill-available section with sticky applied. The parent divs are set to static, and so the .sticky-nav is relative to the Body. In this configuration, the fill-available objective works, but the sticky nav does not.

Sticky nav works perfectly if placed outside & after the fill available container as a direct child to Body, but we lose the 100% visibility on different screens.

Many thanks in advance! Please preview the published link as well so you can see the result of the fill-available code.

Please shout if I can supply any other information :slight_smile:

• Read-only link here

UPDATE:

I wasn’t able to find a working solution, so for now have made a work-around by duplicating the nav bar, setting position to fixed + top aligned, and using a scroll interaction to show/hide it when the original one enters/exits the viewport.

Will update if I find another solution down the line…

Sticky literally means “will stick to something until its parent’s boundaries pushes it away”.

So If you leave the navbar in the fill-avail element, it’s going to be pushed away by its boundaries. If it’s at the bottom of that element already, it won’t stick at all.

Move the navbar in the Body flow of elements, change nothing else, and it works… because the navbar will only be pushed away by the bottom of the body, which in that case will never happen.

CleanShot 2022-03-31 at 15.51.56

Now for your screen size: make CSS calculate the height of the fill-available element with Calc. Defining a height for the navbar will help. Let say 65px.
Use an embed element to add custom code like this:

.fill-available {height:calc(100vh-65px);}

1 Like

Hey Vincent - thank you for taking the time to look into it, this sounds like exactly what I’m looking for.

Step 1 worked great, and nav is now sticky to body :+1: thank you!

I’m still struggling to implement the calc in Step 2.

I’ve added an embed element to the .fill-available div, and pasted the above code, within style tags. Is this correct? [designer here, no code experience]

Just in case it’s not visible in the shared link, this is the code in the project settings ‘Head’:

The div is being targeted by ID:
Screenshot 2022-03-31 at 16.02.46

You were very close and I know there’s always a “moment” with CSS sticky where you don’t really know how it works. But that happens once only :slight_smile:

I guess remove the code from the head, keep only your calc code.

Fill available looks nice to use but it would require both the element and the nav to be inside of the same 100vh element, which goes against the stickyness.

1 Like