Pinning a nav bar from a specified page point on scroll

Design help General
1

Hi there,

I would really appreciate some help with some navigation functionality that I am trying to build.
The support team have tried to help but sadly Webflow doesn’t support this and I’ve yet to find a work around.

What I want to do is create a secondary nav bar that is lower down the page (see the image attached) to pin to the top of the page ONLY once you have scrolled down past it. Once scrolled into this content the nav bar is pinned and each relevant navigation item highlights and can be anchored to each part of the page.

This is an example of someone who has created this in code: See link

Hope that makes sense and thank you to anyone who can help

Harmesh

1070×1030 78.7 KB

Here is my public share link: LINK
(how to access public share link)

2

Hi @Harmesh This isn’t yet possible to do natively in Webflow. But have you tried custom code?

Here is an article that may help:

3

I did this on a site (I can’t remember the webflow forum where I originally grabbed this from).

  1. Assign the navbar the id of “myaffix”

  2. Add this custom code to the head of that particular page:

    .w-nav.affix { position: fixed; width: 100%; top: 0px; z-index: 999; }

  3. Add this code to the custom code section of the site:

1 Like
4

How did you make out @Harmesh?

5

@Harmesh

Is this what you’re talking about? Scroll and you’ll see the blue nav bar trigger another fixed nav bar. It’s two different bars with the same links, but the user will experience it as the same bar.

I’m not sure if this is what you’re looking for, but if it is, I’ll share my webflow link so you can see the structure and interactions.

http://horizonstaging.webflow.io/k12schoolnutrition/onesource/home

P.S. If you click the “Solana” link, it looks broken, but it’s not. There’s just no Solana content on that page yet. I’m still building this site. :slight_smile:

6

Thank you @PixelGeek, I will give this a try and let you know. Have yet to try custom code.

7

Thanks @KProServices, where do you specify the page point where the nav is fixed?

8

Hi @ctotty, thank you so much for the example. That is exactly what I’m looking to do along with highlighting the section of the nav that you are in. Feel free to say no, but could you please share with me a version of the working file? I just need to see how you built the interactions.
Many thanks,
Harmesh

9

Here’s my public link: https://preview.webflow.com/preview/horizonstaging?preview=0a6d36646617aa6f7103988eb54a4bde

Basically, the lower menu has absolute positioning at the top of the section near the middle of the page. It triggers the sliding down of the fixed menu hiding underneath the main menu header. So be aware of z-index levels.

My element naming is not real obvious to anyone but me, so I hope you can figure it out by looking at the structure.

Let me know if I can help.

10

Nothing special. It was based on the position of the nav bar within the designer. In my case, I had a header section at 100% height and the nav bar below it… so you didn’t see the nav bar until you started scrolling and once the nav bar hit the top of the screen it stuck. I am tied up right now but I will try and post a read only to the site I did it with later.

11

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.