Streaming live at 10am (PST)

Scrolling nav bar that will fix to the top of the page


#1

So on my home page I have a fixed image that I'm wanting to put a nav bar underneath. I'm trying to have the nav bar scroll to the top of the page, and then stay at the top of the page while everything else scrolls underneath. Does anyone know how to do this?

Thanks for the help!


#2

Hello @joshua49,

This effect can be done by using 2 navbars, one will be "scrollable" (usualy position:relative) and another one "fixed"(with fixed position). Fixed navbar initialy hidden (moved up on 100%). Then create interaction with scroll trigger where "fixed" navbar will move down to correct position, and will moves up when regular navbar will scroll to the view.

Regards,
Anna

P.S. If you have some questions about template work (settings, etc) you can contact owner of template directly.


#3