Implementing Headroom JS into GBeaver Theme

What is Headroom.js?

Headroom.js is a lightweight, high-performance JS widget (with no dependencies!) that allows you to react to the user’s scroll. The header on this site is a living example, it slides out of view when scrolling down and slides back in when scrolling up.

Source – http://wicky.nillia.ms/headroom.js/

 

METHOD 1

Follow the instructions at below If you are directly editing the gbeaver folder’s files.

Step 1: Enabling the Sticky Header option

Login to your dashboard, navigate to GBeaver -> Theme Options page and expand the General Settings section. Turn on the “ENABLE STICKY SITE HEADER?” option.

Step 2: Download/Upload Headroom.js file

Download the Headroom.js and jQuery.headrom.js file from Github and upload into gbeaver/assets/js folder.

Step 3: Adding Custom PHP snippet

Open the functions.php file and add this snippet at end of the file

Step 4: Adding Custom CSS

Open the style.css file and add this CSS

 



METHOD 2

If you are using the skin logic of GBeaver theme as per this instructions, then you will follow the instructions below:

Step 1: Enabling the Sticky Header option

Login to your dashboard, navigate to GBeaver -> Theme Options page and expand the General Settings section. Turn on the “ENABLE STICKY SITE HEADER?” option.

Step 2: Download/Upload Headroom.js file

Download the Headroom.js and jQuery.headrom.js file from Github and upload into customize-gbeaver/js folder (you will create this folder).

Step 3: Adding Custom PHP snippet

Open the custom-functions.php file and add this snippet at end of the file

Step 4: Adding Custom CSS

Open your custom CSS file and add this new CSS there

 

Reader Interactions

Leave A Reply

Your email address will not be published. Required fields are marked *