Hide header until it is needed in WordPress using Headroom.js

Want to slide your site's header out of view when scrolling down and slide it back in when scrolling up? In this article I show how to incorporate Headroom.js in WordPress for non handheld devices.


Upload headroom.min.js to your child theme directory/js (create js directory if it's not present).

Upload jQuery.headroom.min.js to the same location as above.

Upload a file named say, headroom-init.js in the same location having the following code:

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

Already a member? Log in below or here.