This members-only tutorial provides the steps to implement this tutorial in Parallax Pro.
![](https://i0.wp.com/sridharkatakam.com/wp-content/uploads/2019/01/parallax-pro-sliding-down-search1.jpg?fit=1024%2C249&ssl=1)
![](https://i0.wp.com/sridharkatakam.com/wp-content/uploads/2019/01/parallax-pro-sliding-down-search2.jpg?fit=1024%2C469&ssl=1)
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
To view the full content, please sign up for the membership.
Already a member? Log in below or here.
Is there a tutorial on how to do this on the Sample theme in Genesis please?