Streaming live at 10am (PST)

Sticky menu bar that appears after section?


#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? 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!


#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: 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!


#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


#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?


#10