I’m currently trying to create a site with 2 nav bars. I want the 2nd (Navbar2) navbar to ‘stick’ to the top of the screen when I scroll down, with the first navbar scrolling out of view. I’ve tried everything I can to try and make this work using various positioning options, and applying animations, but haven’t managed to get it quite right yet.
Can anyone help please?
thanks
C
Here is my public share link: LINK
(how to access public share link)
There is a stick property in CSS but we don’t use it because it’s badly supported.
The “trick” in webflow is to have 2 copies of you navbar. One that scrolls and will disappear and one that is postionned absolute to the top, invisible, and that becomes visible with an interaction, when the first one reach the top of the viewport. If you do it good, the transition is unnoticeable.
Hi Vincent,
Thanks for the reply. I do have 2 navbar elements, but I don’t want the 2nd one to be invisible, as it contains the main navigation. Currently the top navbar scrolls out of view which is fine, but what I can’t work out is how to create an interaction that makes the 2nd navbar stick to the top of the viewport on scroll. I’ve tried, but it keeps sticking below the stop of the viewport.
C
That’s what I am saying. Duplicate this 2nd navbar so you have two copies of it. One that scrolls and will disappear and one that is postionned absolute to the top, invisible, and that becomes visible with an interaction, when the first one reach the top of the viewport. If you do it good, the transition is unnoticeable.
HI Vincent,
Sorry, my misunderstanding! I’ve been working on this for a while now and it’s taken me just ages to get it working, as I’m a beginner with all this interaction stuff!
I’ve got something like a working solution now, although it isn’t as slick as I’d like it, so any suggestions to make it better would be much appreciated.
Many thanks
C
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.