How to Slide Down Search Box in a Full Screen Overlay in Parallax Pro

This members-only tutorial provides the steps to implement this tutorial in Parallax Pro.

Tested in Parallax Pro 1.3.3.

Step 1

Edit js/parallax.js.

Before the closing }); at the end of the file, add

$('#trigger-overlay').click(function () {
    $('.overlay .search-form input[type="search"]').focus();
})

Step 2

Download the source code from here and extract the zip file.

a) Upload the following files from js folder to Parallax Pro's js directory:

• classie.js
• demo1.js
• modernizr.custom.js

b) Upload css/style3.css to child theme's css directory (create if not existing).

c) Upload img/cross.png to Parallax Pro's images directory.

Step 3

Edit functions.php.

a) Replace

// Enqueue scripts and styles.
add_action( 'wp_enqueue_scripts', 'parallax_enqueue_scripts_styles' );
function parallax_enqueue_scripts_styles() {

	wp_enqueue_style( 'dashicons' );
	wp_enqueue_style( 'parallax-google-fonts', '//fonts.googleapis.com/css?family=Cormorant+Garamond:400,400i,700,700i|Quicksand:400,500', array(), CHILD_THEME_VERSION );

	$suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
	wp_enqueue_script( 'parallax-responsive-menu', get_stylesheet_directory_uri() . '/js/responsive-menus' . $suffix . '.js', array( 'jquery' ), CHILD_THEME_VERSION, true );
	wp_localize_script(
		'parallax-responsive-menu',
		'genesis_responsive_menu',
		parallax_responsive_menu_settings()
	);
    
}

with