How to make a sticky menu bar

Hi Guys,

I want to make a sticky menu bar. An exempla here: SpaceTemplates.com is for sale | HugeDomains

Can you guys help me?

Thanks a lot!

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

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.

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;
}

4 Likes

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?

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

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

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

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

1 Like

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

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

2 Likes

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?

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>
1 Like

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

@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

1 Like