Title: "sticky" Navigation
Last modified: August 21, 2016

---

# "sticky" Navigation

 *  [Christine357](https://wordpress.org/support/users/christine357/)
 * (@christine357)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/sticky-navigation-1/)
 * So I recently found the perfect code I’ve been looking for to get an element 
   to “stick” to the top of a page while you scroll down. I have it working in a
   test environment on a div element but I cannot seem to get it to quite work with
   my WordPress navigation. I got the code from [](http://www.hongkiat.com/blog/css-sticky-position/)
   and here is what my JQuery looks like:
 *     ```
       $(document).ready(function() {
       var stickyNavTop = $('#site-navigation').offset().top;  
   
       var stickyNav = function(){
       var scrollTop = $(window).scrollTop();  
   
       if (scrollTop > stickyNavTop) {
           $('#site-navigation').addClass('sticky');
       } else {
           $('#site-navigation').removeClass('sticky');
       }
       };  
   
       stickyNav();  
   
       $(window).scroll(function() {
           stickyNav();
       });
       });
       ```
   
 * And my XHTML:
 *     ```
       <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 -->
       ```
   
 * What happens is, when I scroll down, a short white bar appears and follows scroll.
   The navigation shrinks and the contents disappear. I posted this issue on another
   forum for some feedback and a moderator suggested it appears the contents are
   being pushed out and asked if they are being floated. I tested this theory by
   floating a couple of div elements and
 * li elements and they stayed in the “sticky” div just fine.
    Trouble is, I don’t
   know much about how the menu is being placed into my code to get a full understanding
   of what could be causing this. I’ve tried making the navigation bar a solid 200px
   high just to see what would happen, and in this case it doesn’t shrink when I
   scroll, but the menu items do still disappear.
 * Any ideas?

Viewing 1 replies (of 1 total)

 *  Thread Starter [Christine357](https://wordpress.org/support/users/christine357/)
 * (@christine357)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/sticky-navigation-1/#post-4539352)
 * I discovered something new about this. The “sticky” navigation only doesn’t work
   properly when I am logged into the site (with the top bar with the links to the
   Dashboard etc). Does anyone know why this might be? I wouldn’t want it to stop
   working for others who have a registered account.

Viewing 1 replies (of 1 total)

The topic ‘"sticky" Navigation’ is closed to new replies.

 * 1 reply
 * 1 participant
 * Last reply from: [Christine357](https://wordpress.org/support/users/christine357/)
 * Last activity: [12 years, 3 months ago](https://wordpress.org/support/topic/sticky-navigation-1/#post-4539352)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics