Use jQuery Waypoints Sticky Elements to create sticky navigation menu

jquery_waypoints.md

STEP 1

Add the following to theme's functions.php file (modify module type if needed):

// Add Support for Alternate Module Styles
add_action( 'it_libraries_loaded', 'it_builder_loaded' );
if ( ! function_exists( 'it_builder_loaded' ) ) {
  function it_builder_loaded() {
		builder_register_module_style( 'navigation', 'Sticky Navigation', 'navigation-sticky' );
	}
}

STEP 2

Add new style from Step 1 to module containing sticky element in Builder's layout editor

STEP 3

Upload the following 3 files to 'wp-content/themes/theme-name/scripts' directory:

• waypoints.min.js
• waypoints-sticky.min.js
• sticky-nav.js

Modify sticky-nav.js to target correct element class or ID (if necessary).

STEP 4

Add the following to theme's stylesheet:

.stuck {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

STEP 5

Add the following to theme's functions.php file:

add_action('wp_enqueue_scripts', 'intw_scripts_method');
function intw_scripts_method() {
  // Enqueue jQuery Waypoints Sticky Elements to make nav menu sticky on home page
  // src: http://imakewebthings.com/jquery-waypoints
  wp_enqueue_script(
		'waypoints',
		get_stylesheet_directory_uri() . '/scripts/waypoints.min.js',
		array('jquery'),
		'2.0.2',
		'true'
	);
	wp_enqueue_script(
		'waypoints-sticky',
		get_stylesheet_directory_uri() . '/scripts/waypoints-sticky.min.js',
		array('waypoints'),
		'2.0.2',
		'true'
	);
	wp_enqueue_script(
		'sticky-nav',
		get_stylesheet_directory_uri() . '/scripts/sticky-nav.js',
		array('waypoints-sticky'),
		'1.0',
		'true'
	);
}