Have a sticky nav that stays at the top of the view port when scrolling while maintaining 100vh for Hero section

[Andy_Hoey]

Hi Webflow community, I was hoping someone could aid me in a resolution for the below issue.

I want to have a sticky Navbar whilst scrolling down to the bottom of the page.
Right now my Navbar, Header and Hero Section are in a Wrapper with display of Flex, the reason for this is i have set the Hero section (child) set to Flex grow and the wrapper to 100vh so the hero section always fills up the remaining viewport height, so the goal being no matter what is above my hero section it will only goes as far as the max viewport height and no less.

The problem is I have set my Navbar to sticky and it works great until i scroll down to the bottom of the wrapper and as you would expect from sticky elements it disapears/stays at the top.

I would like to find a work around to having the nav bar remain sticky all the waydown to the bottom of the body while having a hero section always taking 100vh no matter how big the browser gets on desktop size.

I was looking at javascript to swap out the Nav position to static on scroll past the wrapper or removing the wrapper and making some custom code to calculate the height of the nav and header to minus off from the hero section but I’m not sure if webflow can support this.

Any insight would be awesome! my main goal is to maintain 100vh for the hero section.
many thanks!
Andy H.

https://preview.webflow.com/preview/bloominbeautiful?utm_medium=preview_link&utm_source=dashboard&utm_content=bloominbeautiful&preview=546702a2d595c443a00724fb7c12d881&workflow=preview

---

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

[joejola (Joseph Amato)]

Your navbar was sticky relative to your header, not the page. A few things:

• Take your main navigation out of other sections

• Set your hero to 100vh and reset Sizing under Flex Child

• You also could combine your Header component with the Navigation component with some tweaking. It’s a little redundant.

Hope this helps. Happy no coding!

[Andy_Hoey]

Thanks joejola, my main goal forgot to mention is i wanted everything in the Hero section to be dead center vertically which it does currently because the header/nav are not pushing down the hero section or counting towards the vertical height. So i guess i could just adjust the hero child with a negative margin of what ever the vertical height of the header/nav is.
Do you know if webflow supports custom code to create a calc css property?

i may actually consider putting the brand in the center between the nav links and hiding it on scroll