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.

I have already looked at many jquery examples on how to make the menu sticky. I have applied these tutorials on clean html pages and they have worked perfectly. However, when I try to apply it on the Twenty Twelve theme, nothing happens. The fixed attribute doesnt get added to the menu class.

This is the CSS:

.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}

This is my menu:

<nav id="site-navigation" class="main-navigation" role="navigation">
        <h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
        <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->

This is the JQUERY:

$(document).ready(function() {
var stickyNavTop = $('.main-navigation').offset().top;

var stickyNav = function(){
var scrollTop = $(window).scrollTop();

if (scrollTop > stickyNavTop) { 
    $('.main-navigation').addClass('sticky');
} else {
    $('.main-navigation').removeClass('sticky'); 
}
};

stickyNav();

$(window).scroll(function() {
    stickyNav();
});
});

Am I missing something?

share|improve this question
    
Have you seen wordpress.stackexchange.com/questions/2895/…? –  toscho Aug 1 '13 at 23:01
add comment

1 Answer 1

I found a way to make it work.

I had to put: <?php wp_enqueue_script('jquery'); ?> before <?php wp_head(); ?> and then the jquery code.

If there is a better, clean way, please let me know.

share|improve this answer
1  
First of all, your js first line should be jQuery().ready(function($) {. All your jquery code should be putted in a js file, named e.g. stickynav.js. After that register and enqueue that file using wp_register_script and wp_enqueue_script wrapping these function in another one that hooks on wp_enqueue_scripts action hook. Don't forget to add jquery in the $deps param. –  G. M. Aug 1 '13 at 22:50
add comment

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.