Title: Top Menu Sticky?
Last modified: August 21, 2016

---

# Top Menu Sticky?

 *  [jbiggers](https://wordpress.org/support/users/jbiggers/)
 * (@jbiggers)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/top-menu-sticky/)
 * I would like to make my top menu sticky…. anyone know how to do that?

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [Placid Rodrigues](https://wordpress.org/support/users/placidrod/)
 * (@placidrod)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/top-menu-sticky/#post-5028056)
 * You can add the following jquery script to make the top menu sticky:
 *     ```
       $(document).ready(function(e) {
           var nav = $('.nav_holder');
       	var navlink = $('a.nav_link');
           var navHomeY = nav.offset().top;
           var isFixed = false;
           var $w = $(window);
           $w.scroll(function() {
               var scrollTop = $w.scrollTop();
               var shouldBeFixed = scrollTop > navHomeY;
               if (shouldBeFixed && !isFixed) {
                   nav.css({
                       position: 'fixed',
                       top: 0,
                       left: nav.offset().left,
                       width: nav.width(),
       				"z-index": 1000
                   });
                   isFixed = true;
       			navlink.css({
       				"border-bottom-left-radius":"2px",
       				"border-bottom-right-radius":"2px"
       			});
               }
               else if (!shouldBeFixed && isFixed)
               {
                   nav.css({
                       position: 'static'
                   });
                   isFixed = false;
               }
           });
       });
       ```
   
 *  Thread Starter [jbiggers](https://wordpress.org/support/users/jbiggers/)
 * (@jbiggers)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/top-menu-sticky/#post-5028057)
 * Sorry I am not good with editor… where do I add that?
 * Thanks for your help!!
 *  [Placid Rodrigues](https://wordpress.org/support/users/placidrod/)
 * (@placidrod)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/top-menu-sticky/#post-5028076)
 * In that case, I’m afraid it will be quite tough for you. Still, I’ll try to show
   you.
 * If you are not using child theme, insert the following code in functions.php:
 *     ```
       function add_my_script() {
           wp_enqueue_script(
               'sticky-nav-script',
               get_template_directory_uri() . '/js/sticky-nav.js',
               array('jquery')
           );
       }
       add_action( 'wp_enqueue_scripts', 'add_my_script' );
       ```
   
 * If you **are** using a child theme, create a functions.php in the child theme
   folder (if it’s not already) and insert the following code:
 *     ```
       function add_my_script() {
           wp_enqueue_script(
               'sticky-nav-script',
               get_stylesheet_directory_uri() . '/js/sticky-nav.js',
               array('jquery')
           );
       }
       add_action( 'wp_enqueue_scripts', 'add_my_script' );
       ```
   
 * If you are not using child theme, look for the js folder in the theme folder.
   If its not there, create a folder and create sticky-nav.js file in the folder.
   Insert the following code in the this file (there were some errors in the previous
   code, sorry):
 *     ```
       jQuery(document).ready(function(e) {
           var nav = jQuery('#topbar');
           var navHomeY = nav.offset().top;
           var isFixed = false;
           var $w = jQuery(window);
           $w.scroll(function() {
               var scrollTop = $w.scrollTop();
               var shouldBeFixed = scrollTop > navHomeY;
               if (shouldBeFixed && !isFixed) {
                   nav.css({
                       position: 'fixed',
                       top: 0,
                       left: nav.offset().left,
                       width: nav.width(),
       		"z-index": 1000
                   });
                   isFixed = true;
               }
               else if (!shouldBeFixed && isFixed)
               {
                   nav.css({
                       position: 'static'
                   });
                   isFixed = false;
               }
           });
       });
       ```
   
 * In the last code above, you will see #topbar. You need to replace it with the
   id or class of your top menu.
 * I hope this helps.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Top Menu Sticky?’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/stargazer/4.0.0/screenshot.png)
 * Stargazer
 * [Support Threads](https://wordpress.org/support/theme/stargazer/)
 * [Active Topics](https://wordpress.org/support/theme/stargazer/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/stargazer/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/stargazer/reviews/)

 * 3 replies
 * 2 participants
 * Last reply from: [Placid Rodrigues](https://wordpress.org/support/users/placidrod/)
 * Last activity: [12 years, 1 month ago](https://wordpress.org/support/topic/top-menu-sticky/#post-5028076)
 * Status: not resolved