Sridhar Katakam

Genesis and WordPress Tutorials

Using Sticky-Kit to make Header, Navigation or other elements sticky in Genesis

by 16 Comments

Sticky-kit provides an easy way to attach elements to the page when the user scrolls such that the element is always visible.

Let's take a look at how we can use Sticky-Kit to make webpage elements remain persistent as the user scrolls past them.

While there are several similar jQuery scripts out there the nice thing about Sticky-Kit is that it automatically ensures that the sticky element becomes unstuck when its immediate parent is scrolled out of view, meaning we do not need to specify when the sticky behavior should stop.

Sticky Header

Sticky (Primary) Sidebar

Sticky Primary Navigation

Sticky Secondary Navigation

Sticky Genesis Simple Share on single Posts

Step 1

Upload jquery.sticky-kit.min.js to child theme's js directory.

Step 2

In this example I am going to assume that you do not want the sticky behavior on tablets and mobiles. As such, create a file named say, non-handhelds.js in child theme's js directory having the following code:

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

Already a member? Log in below or here.

  • Hi thanks for this tutorial. I am currently trying to make a sidebar sticky. I am developing my website using the Genesis ‘Sample Theme’. For some reason the sidebar only sticks after the second time I scroll down a page. Do you know what is causing this and how I can fix this issue.

    Thanks again,
    Jonathan

    Reply

  • Hi

    I have implemented this and it all works except some of the content that I am using floats over the top of the header bar. In particular, this seems to be content on the pages from Essential Grid, OIO Advertising slots and page content from Beaver Builder.

    I have tried changing the z-index to something higher (999) but this does not have any effect.

    Any suggestions would be much appreciated.

    Many thanks in advance.

    Mark

    Reply

    • PS. I should have said that I have implemented this using Genesis + Dynamik but I enqueued / placed everything correctly and it is working so I don’t think it is related to that?

      Reply

  • Is this possible to use this tutorial to create a combination of sticky header, primary navigation with logo shrinking?
    Thanks

    Reply

  • Thanks for the great tutorial. I set up a sticly primary nav and it works fantastically on Chrome, but it is not working on safari. Any suggestions?

    Reply

  • Hi Sridhar

    I have tried to implement this on a new site I’m building (staging3.wpwebsitecoach.com), but with no success.

    I had previously tried your newer, CSS only tutorial, but could not seem to convert it from “last widget sticky” to whole sidebar sticky.

    Any thoughts?

    Reply
    • >