Streaming live at 10am (PST)

How to make a sticky menu bar


#1

Hi Guys,

I want to make a sticky menu bar. An exempla here: http://demo.spacetemplates.com/garden/image-background-home/

Can you guys help me?

Thanks a lot!


Adding a fixed navigation bar
#2

Hi @Fellipe_Abreu. I believe you want a fixed navigation bar. As it happens, @callmevlad has written an excellent tutorial for this:

Hope this helps,
Bertie


#3

Hi bertie,

I saw this, but I want this "sticky" menu.

Exempla: I have a

with any content, the and other
. What I want is, when I scroll down my menu "sticky" and change to fixed on top.

Like the link above!

Thanks for the help.


Floating Nav Bar That Fixes When Touches The Top Of The Browser
#4

Hi Guys, I did it. YEAH!

I need to use javascript

$(function(){

	var listval = $('.section-nav-bar-menu')[0].offsetTop;   

	$(document).scroll(function() {     

		var topval = $(document).scrollTop();         
			if(topval >= listval){  
			   $('.section-nav-bar-menu').addClass('fixed');  
			} else {  
			   $('.section-nav-bar-menu').removeClass('fixed');  
			}  

	});  

});

and the class fixed like this
.fixed {
position: fixed;
left: 0px;
top: 0px;
right: 0px;
z-index: 1;
}


Lower navbar become upper one
Custom Interaction on js
#5

great looking site by the way! I really liked what you did with the nav!

Question: Is your blog static or dynamic? If dynamic how did you do it?


#6

Now it's static, but I will transform to dynamic later.


#7

I Found a better way to do that, it's just more smooth.


#8

Hi Bertie, just wanna say thanks for this reference! Great!


#9

Hello everyone, so those links don't work anymore. The demo for the Jayhan Loves doesn't load so I have no idea what I'm getting. 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!


#10

http://www.blastprocessor.co.uk/ has quite a nice sticky menu, I'm not sure of the best way to go about achieving the same effect, should I try adding additional CSS properties and some jquery, or should i export at the end and apply the same principal with adobe edge CC?

I very much like the animations of the sliding text and logo once the menu becomes fixed - or - "sticky"

Anyone got any ideas, opinions, suggestions? @thesergie? Yourself or any other webflow guru's have an answer / suggestion?

Thanks guys!

AV


#11

@V_Man and @DFink you can use Bootstrap's Affix plugin to make your navbar fixed. Here's how @danro did it:


#12

Hey thesergie, I've just been trying to implement this solution on a navbar. I copied the code to an HTML embed as in the demo, and added the 'myaffix' ID to the navbar but this doesn't seem to do anything - is there another step that I'm missing?


#13

Nevermind - I got it, I had to add the following to my head section in custom code:

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

#14

So there's still noway to make it by just using webflow?


#15

@ivanzhukov, take a look at this, it might be a good option for what you're trying to accomplish:

http://interactions.webflow.com/fade-in-navbar-video


#17

#18