Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

1 Answer 1

What you could do is the following:

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

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

    $(window).scroll(function(){
        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

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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