WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

This seems simple, except that I am not able to figure it out.

In a wordpress theme, how can I make a custom menubar below the header image stick at the top after scrolling down the page?

Example sites are www.riverviewford.com and www.forexfactory.com.

Here is the code I found on the net and am trying to use in wordpress. http://jsfiddle.net/uFq2k/3/

How do I actually call the script, and where from? Thanks in advance.

share|improve this question

What you could do is the following:

1) Make a javascript-file and put the following content into it:

    var stickyHeaderTop = $('#stickyheader').offset().top;

        if( $(window).scrollTop() > stickyHeaderTop ) {
            $('#stickyheader').css({position: 'fixed', top: '0px'});
        } else {
            $('#stickyheader').css({position: 'static', top: '0px'});

2) Save this file in your theme folder as (for example) stickyheader.js.
3) Put the following code in your theme's functions.php:

do_action( 'after_setup_theme', 'wpse101288_enqueue_script' );

function wpse101288_enqueue_script() {
    wp_register_script( 'stickyheader', get_template_directory_uri() . '/stickyheader.js', array( 'jquery' ) );

4) Put the menu you want to get "sticky" between te following code:

<div id="stickyheader">/* YOUR MENU CODE HERE */</div>

or even better, add id="stickyheader" to the existing element in wich your menu is located.

share|improve this answer
Hi Mike,Thanks for responding.I tried, but its not working. I am using 'pinboard' theme. Here's the header content. pastebin.com/iaBf6SbA I used the div wrapper for the menubar starting at line 28. Not working. – draco678 May 30 '13 at 13:20
didn't work for twentyTen theme, nor for its child theme. Even tried what this link had to say: wpexplorer.com/javascript-wordpress wp doesnt budge. – draco678 May 30 '13 at 18:09
Did you received any errors during pageload (firebux console), has the element you wanted to get "sticky" the id stickyheader and you are sure the element isn't just hiding behind the content after the new style assignment? - It happend to be that I was in need of the same kind of script yesterday, so I used the same as you did. I didn't work for me either until I'd changed the CSS (z-index). – Mike Madern May 31 '13 at 6:06
plz see my response added as an answer above. This site doesnt allow longer comments and code editing. By the way, its working for a child theme of twentyten but not pinboard. Here is the new header(menu code line 102-109): pastebin.com/SPKgBVrx – draco678 May 31 '13 at 9:29
Looks good to me? I think you'll have to debug your html with Firebug to get an idea of what is going wrong. Can you send a URL of your website? – Mike Madern May 31 '13 at 14:03

protected by toscho Jan 31 at 10:17

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.