SOLVED: Can't figure out what's wrong with my sticky nav

Hey dear Webflow community,
I’m going crazy over these interactions. Everything seems set up correctly, but it doesn’t behave the way I wish.

My (customer’s) goal is to have the subnav of this page stick to the upper border of the viewport, once it scrolled there. I searched Webflow for different solutions.

To accomplish that, I have two navbars. The upper is set to display:none as initial state. That works, but the way back doesn’t:

com-optimize

There’s a trigger just above the 2nd navbar, to show/hide the 1st:

  • Q1: Is this the best approach to this problem?
  • Q2: What am I doing wrong?

Live page: http://bayerischer-landesverein-heimatpflege.webflow.io/volksmusik

Here is my public share link, Subpage “Volksmusik”: Webflow - Bayerischer Landesverein für Heimatpflege e.V.

1 Like

Hello @Tobi_Huber

Here’s a screen record where you can see my approach. I think it’s easier :wink: Video > https://www.useloom.com/share/1c1d99a45a7b4f868ec11eae4777f18e

1. Delete the first nav

2. Open the page settings and click custom code

3. In the head area add the code from bellow

<style>
.navbar-abteilung.w-nav {
 position: -webkit-sticky;
 position: -moz-sticky;
 position: -ms-sticky;
 position: -o-sticky;
 position: sticky;
 top: 0px;
 }
 </style>

The code tells the navbar to stick when the top of the viewport reaches it.

Tell me if this works.

Piter :blue_heart:

1 Like

Here’s another record where you can see how should work > https://www.useloom.com/share/f8a99814e5f642448034e566f6a2100f

Piter :blue_heart:

Thank you soooo much @PeterDimitrov!
Actually I just came across this solution as well… might have been my next try.

I just think that this should be easier and be possible without code. Also, the interactions can become quite confusing.

Thank you!

1 Like

Thank you. Already got it.

BTW: Are your videos supposed to have sound? I don’t hear anything.

1 Like

Nope :sweat_smile: I have some problems with my mic…

1 Like