Sticky menu bar that appears after section?

Publishing help General
1

Hello everyone, so I had posted this in another thread but heard nothing so I decided to create a new thread. Can anyone tell me how to have the navbar appear as i pass a section in webflow similar to this site http://www.blastprocessor.co.uk I want to have a first section with links at the bottom and then a sticky navbar appear once that section is passed.

Will this work? javascript - How to create a sticky navigation bar that becomes fixed to the top after scrolling - Stack Overflow

And how would I add it to the page?

Thanks!

2

Webflow doesn’t include affix.js that comes with Bootstrap so you’ll have to add that code yourself from here: https://github.com/twbs/bootstrap/blob/master/js/affix.js

You can learn how to set it up here: Redirecting…

To do the data-spy="affix" and all those data attributes select the div element, go to settings and you’ll see the data attributes panel at the very bottom.

@DFink Try it out and see how it works!

3

Hey everyone, so I found a way of doing this natively in webflow after watching the tutorial videos. Since it is basically a fixed header, the only issue is making it invisible on the first section. That can be done by putting it behind the top section using Z index. I did this on one of the templates by making the navbar fixed and setting its Z index to 1 and setting the top section’s z index to 2. This put the navbar behind the first section but on top of all others since they are set to none by default. Check it out:https://webflow.com/design/zindextest?preview=00133e4a495d801fbb8a8ad964e72465

Is there any issues of doing it this way that any more experienced coders can clue me in on?

Thanks!
Dave

2 Likes
4

Hey Dave,

I was looking into doing the same thing but your link is not valid anymore…
Did it work? do you have a link where I can check it out?

i m hoping to be able to recreate something like this: http://spectrom3d.com/
any advice or lead is more than welcome :smile:

Tks a lot,

5

I haven’t used it on any of my sites so I unfortunately cannot give you a working example.

6

Hey guys,

I recreated a sticky navbar using the navbar fade in interaction just by putting a 0ms transition and here is the result…

Click on the test button or directly select the test page: https://webflow.com/design/newtrideo?preview=baf41d9f32936a7e402f7f00903b6b48

What do you think about it? looks to work fine right?

any idea on how I could make those button move right like in this site: http://www.blastprocessor.co.uk/
I wanted to add a second interaction on the hero section affecting the navmenu but it doesnt seem possible as i have already one for the navbar to appear…

Anyway any feedback or help is welcome!

Thanks,

Nico

7

I dont see a button at all, very confused about your layout. I’d also put a gradient on the hero backgrounds, you can barely read the links.

8

you dont see the test button in the first navbar? or you can see the buttons in the test page?