â–Ľ
Streaming live at 10am (PST)

Sticky menu bar that appears after section?

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? http://stackoverflow.com/questions/14667829/how-to-create-a-sticky-navigation-bar-that-becomes-fixed-to-the-top-after-scroll

And how would I add it to the page?

Thanks!

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: http://getbootstrap.com/javascript/#affix

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!

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

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,

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

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

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.

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