How to remove sticky menu when using Twenty Seventeen theme

Recently I’ve made a child theme of Twenty Seventeen default WordPress Theme called Twenty Kades.

I made several adjusts on parent theme to fit my needs, one of them is remove Sticky Menu effect when scrolling through page. I hope the tutorial below helps you can do it by yourself.

Why I want disable this effect: the effect is okay to show on a large monitor but will occupy a lot of space on the smaller screen (<1366 px). I want to reserve more space for post’s content. So let’s do it!

Firstly, make sure you are using child theme of Twenty Seventeen, never ever edit on parent theme files unless you will loss all your changes when theme update new version!

In this tutorial, I use child theme Twenty Kades for demo purpose.

Step 1: create a child theme

Let’s say you’re using a child theme of Twenty Seventeen. If not yet, see how to create a child theme here.

Step 2: dequeue parent theme global script

Menu Sticky is handled by scripts in twentyseventeen/assets/js/global.js file. So need to dequeue this script from parent theme.

Open functions.php file which is located in your child theme folder. Add these following code:

add_action( 'wp_enqueue_scripts', 'twentykades_enqueue_scripts' );
function twentykades_enqueue_scripts() {
  
  // disable menu sticky effect when scrolling
  wp_dequeue_script( 'twentyseventeen-global' );

}

Note: replace prefix twentykades_ with your own prefix name.

Step 3: enqueue child theme script and adjust code

Now we’ve just removed the scripts from parent theme so we need to add back our child theme script file.

Copy global.js in parent theme content into your global.js in your child theme folder like: /twentykades/assets/js/global.js

Open it in your favorite editor, remove function adjustScrollClass from line 57 to 86:

After remove above lines of code remeber press save button to save global.js file.

Then we have to enqueue this new script file to child theme. Open your functions.php locate in your child theme folder

add_action( 'wp_enqueue_scripts', 'twentykades_enqueue_scripts' );
function twentykades_enqueue_scripts() {
  
  // disable menu sticky effect when scrolling
  wp_dequeue_script( 'twentyseventeen-global' );

  // add child theme script
  wp_enqueue_script( 'twentykades-global', get_stylesheet_directory_uri() . '/assets/js/global.js', array( 'jquery', 'twentyseventeen-global' ), '040418', true );
}

OK now we finished removing Sticky Menu effect, you can view your site to check it if it works!

I hope you can do this by yourself after reading this tutorial. If face any problems you can leave a comment below I will help.

support by WordPress experts

Subscribe to get latest Themes & Tutorials

I hate spam too!

Leave a Reply