Sridhar Katakam

Genesis and WordPress Tutorials

How to add Parallax effect to Header Hero in Essence Pro

by 7 Comments

Updated on 26 May 2022

This tutorial provides the steps to load Jarallax javascript and apply it on Header Hero in Essence Pro for parallax scrolling effect on the header hero image.

Tested in Essence Pro 1.5.1.

Step 1

Upload jarallax.min.js to Essence Pro's js directory.

Step 2

Edit functions.php.

a) Inside essence_enqueue_scripts_styles(), above

wp_enqueue_script(
    'global-js',
    get_stylesheet_directory_uri() . '/js/global.js',
    [ 'jquery' ],
    genesis_get_theme_version(),
    true
);

add

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Hi Srid,
    Thanx for this tutorial. I am building a site with this theme and like the parallax scrolling better.
    However, it seems to be interfering with the navigation. The submenu items are not clickable (are disappearing) on hovering. This does NOT happen on the homepage, but on other pages in the menu.
    See for instance https://www.heartlighthealing.nl/cms/reacties/

    I asked Studiopress and they thought this was caused by:

    [begin quote Studiopress]

    It is due to this custom code added to the site’s stylesheet, which is not present in the original theme:

    .site-header,
    .hero-page-title {
    z-index: 1;
    position: relative;
    }

    I recommend removing the “Parallax scrolling” custom code, or altering it to account for the submenu position

    [/end quote Studiopress]

    Can you see a solution, or should I just return to the original situation.

    Regards and thanx in advance!
    Kitty

    Reply

      • Really, thanks for taking a look at this Sridhar.
        Obviously my bad and I’ll take another look tomorrow.
        It’s the first time one of your tuts hasn’t worked for me so I assumed it was broken!
        Andrew

        Reply

  • I have the same issue as Kitty with sub-menus.
    Seems to be a hover problem. Would it be possible to set a transition delay to give time to click menu links before sub-menu closes, or something similar? Would really like to retain the cool parallax effect.

    Reply
    • >