Fix Navbar to top pf page when scrolling

Design help General
1

Heyy

I have two NavBars. One is main navbar for the website. Another is a navbar for within the page.
I want the page NavBar to fix up on top of page when scrolling down to act as a menu for the page to view other elements on the page.

I want to achieve this on the Project Page
Here is my website link:
https://preview.webflow.com/preview/mann-kaur?preview=c03f325cdea7801d34cb58aea20ce310

2

Hi @Mann_Kaur, thanks for your post. Can you provide a little more information, I see two navbars, the secondary navbar and the topnavigation navbar. is it so, you want the secondary nav bar to scroll into view and be fixed? Cheers, Dave

3

Hi @cyberdave,

Thanks for the reply.
Let me give you an example. If you go to the link below and just scroll in, you will understand how I want it to work.

You will see that below the image, there is a menu that snaps onto the top of the page when scrolled into that section.

4

I’m actually looking for the answer to this… Working on a site where I would like the secondary nav to scroll to the top of the page and fix once it gets there.

5

Hi @BRDWIL, there was an update to this in our demo kit, where a page was created with an example.

Take a look at the demo kit site:

Demo kit: https://webflow.com/website/Demo-Kit (open site in Webflow)

Folder: Navigation
Page: Sticky Navigation

I hope this helps !

6

thanks @cyberdave, that helped tremendously! I can get it to stick when scrolling down, woohoo!

Now the issue is getting it to unstick when I scroll back up. I don’t want 2 subnavs showing… check out this link to see what I’m referring to:

https://preview.webflow.com/preview/the-jewelry-building?preview=c21d6887a55f69cc6a67c294acf4ea7f

for reference, this is the functionality I’m trying to achieve: 404 - Grain & Mortar

7

Hi @BRDWIL, thanks for the followup. I checked the sample site, but that does not appear to be working:

1550×1286 208 KB

I then checked the preview site, but I cannot find any second nav

2538×1742 2.21 MB

Could you update your post with some screenshots of the nav that is setup to be sticky? I think the solution is to setup the initial nav with an interaction to hide when the second nav scrolls into view.

8

So I think that’s the issue. I’m not trying to change the main nav I have for the site - I only want the sub nav to stick on one page like how it does on this site: 404 - Grain & Mortar

Is that possible to do in webflow? I attached a screen shot of what I’m working with right now

1647×649 434 KB

http://the-jewelry-building.webflow.io/directory

9

Hi @BRDWIL, I am sorry for the delayed reply. The example page you gave, the link is not working for me, do you have another link?

Sometimes it is helps to reduce this design issue to a simple example site, to work out the quirks, confirm the styling needed and interactions, and then do those stylings on your site.

10

Oh no! I think it’s private by default since the site is linked to my organization instead of my personal account. Here is a share link… I just tried in incognito and it seemed to work. You’ll need to go to the page labeled Directory to see what I’m referring to. https://preview.webflow.com/preview/the-jewelry-building?preview=0fe187c0a3c0fd7d2edfcb527c52732e