Ask your WordPress questions! Pay money and get answers fast! (more info)

Make nav bar fixed after scrolling for a number of pixels WordPress


I have tried every tutorial for days trying to figure this out and I'm stumped now so it's time to pay one of you fine people to do this for me.

I need to make the nav bar on my site here: fix itself to the top of the screen once the top header is scrolled out of view.

I have the layout set up so that all that needs to happen is the nav element with and ID of #nav-menu need to change its position from Absolute to Fixed and the the position needs to be set at top:0px.

It seems simple, please help....

Answers (3)


Eric P. answers:

I use jQuery sticky(). There are several versions. I've used the one from Anthony Garand. You can download it from [[LINK href=""]][[/LINK]]

You'll need to put the script file in with your plugin or theme.

Then, use wp_enqueue_script to load it. You can do that from whatever your functions.php hooks to the "init" action.

Then, you just need to add this code to the footer:


To do that, you can add an function to the wp_footer action to echo that (or leave it outside the ?> <?php within the function you hook to wp_footer).

That should do it. Do you need help adding this to a theme, or do you need a plugin to implement it? Contact me if you need it done for you, turn key style in a plugin.

Zac Eckstein comments:

Thank you. I will attempt this again myself using those instructions. If I'm still not able to get it to work I might take you up on the offer of a full fledged plugin for $30.

Thanks, I'll write back later today.


Zac Eckstein comments:

Yeah, tried that and just got more frustrated. I just can't wrap my head around enqueing scripts and all that stuff, I don't get it!

If you're willing, I'll take that plugin option for $30, or I can send you files or give you some ftp access if that's easier. I don't really care about the method as long as it does what it should.



Abdelhadi Touil answers:

What about this tutorial:

[[LINK href=""]][[/LINK]]

Abdelhadi Touil comments:

You can also use this jQuery plugin:

[[LINK href=""]][[/LINK]]

It's mentioned in the above tutorial.
Good luck!

Zac Eckstein comments:

Sorry, let me clarify. I have found lots of code snippets and tried many of them using various different WP techniques, but I can't get them to actually do anything. I don't think I am implementing it properly so I'm looking for someone to do that part of the work for me, using whatever piece of code they think is best.

Abdelhadi Touil comments:

I see now. Send me your FTP login and I'll try to do it for you.


Ross Wilson answers:

I have used this plugin with success before:
[[LINK href=""]]Scroll To Fixed Plugin[[/LINK]]

There is a very nice demo here with all the code, it looks like you would want to focus on the first part of the javascript $('header')
[[LINK href=""]][[/LINK]]