Sridhar Katakam

Genesis and WordPress Tutorials

How to make Horizontal Gravity Forms Opt-in Stick below Fixed Header in Parallax Pro

by 6 Comments

In the comments section of Horizontal Gravity Forms Opt-in in Parallax Pro tutorial, a user asked,

This is great!

I really want a subscribe bar likes this that will move up as you scroll and then stay at the top of the screen with the menu like the secondary menu on Author Pro.

Do you have any suggestions for that?

This can be done using Sticky-kit jQuery script. I wrote about using this in Genesis here.

In this tutorial I share the steps for making horizontal opt-in form section to remain stuck even after the user scrolls past it near the top (below the fixed header) in Parallax Pro.

Screenshot:

sticky-opt-in-below-header-parallax-pro

Screencast:

Step 1

Implement all the steps of Horizontal Gravity Forms Opt-in in Parallax Pro tutorial.

Step 2

Upload jquery.sticky-kit.min.js to Parallax Pro's js directory.

Create a file named say, non-handhelds.js in the same location having the following:

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

Already a member? Log in below or here.

  • Can you clarify if the jquery scripts are to be uploaded directly to the js folder in the parallax pro theme itself?
    Michelle

    Reply

      • I clicked on jquery.sticky-kit.min.js link in step 2 and it opened in a new window with jscript. I copied the jquery.sticky-kit.min.js, pasted the script contents and saved it in Notepad with the name jquery.sticky-kit.min.js and uploaded it to Parallax Pro’s js directory. I also added the script for the non-handhelds and saved that in Notepad in its own files. Both are uploaded to Parallax Pro’s js directory and I have added the php script from step 3 and css from step 4 but there is no stickiness in either the menu or opt-in form. Is there a step I am missing? Should the menu be sticky before doing this?
        Michelle

        Create a file named say, non-handhelds.js

        Reply
    • >