Remove sticky behavior from top navigation on twenty fourteen theme?

Question

Before I answer this question, I would believe that you have already created a child theme. Reason: You should never make any changes to a theme/plugin that you are not the author of. This includes core files

With that sorted, the behavior of the navigation menu in purely controlled by js,

  77          /*
  78           * Fixed header for large screen.
  79           * If the header becomes more than 48px tall, unfix the header.
  80           *
  81           * The callback on the scroll event is only added if there is a header
  82           * image and we are not on mobile.
  83           */
  84          if ( _window.width() > 781 ) {
  85              var mastheadHeight = $( '#masthead' ).height(),
  86                  toolbarOffset, mastheadOffset;
  87  
  88              if ( mastheadHeight > 48 ) {
  89                  body.removeClass( 'masthead-fixed' );
  90              }
  91  
  92              if ( body.is( '.header-image' ) ) {
  93                  toolbarOffset  = body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0;
  94                  mastheadOffset = $( '#masthead' ).offset().top - toolbarOffset;
  95  
  96                  _window.on( 'scroll.twentyfourteen', function() {
  97                      if ( _window.scrollTop() > mastheadOffset && mastheadHeight < 49 ) {
  98                          body.addClass( 'masthead-fixed' );
  99                      } else {
 100                          body.removeClass( 'masthead-fixed' );
 101                      }
 102                  } );
 103              }
 104          }

which you can find in functions.js in the js folder

To remove this functionality, (all in your child theme) you’ll need to dequeue (using wp_dequeue_script()) the original functions.js, copy functions.js to your child theme and remove the mentioned lines and enqueue (using wp_enqueue_script()) the modified js. This will be done inside a custom function that will be hooked to the wp_enqueue_scripts hook

In code and in practice

Create a file called js in your child theme’s root folder.
Copy functions.js and paste it into your js folder in your child theme
Open functions.js and remove the line I’ve mentioned above
Safe the functions.js

Now, open your child theme’s functions.php, and add the following code in there. This will dequeue the parent script and enqueue your new modified script

function enqueue_child_functions_js() {

    wp_dequeue_script( 'twentyfourteen-script' ); //dequeue the parent script
    wp_enqueue_script( my-child-script', get_stylesheet_directory_uri() . '/js/functions.js', array( 'jquery' ), '20140717', true ); //enqueue new modified script

}

add_action( 'wp_enqueue_scripts', 'enqueue_child_functions_js', 999 );

Related Posts: