Beginners

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

 

How do you create site header using Beaver Builder on Genesis Framework?

These days Beaver Page Builder plugin is very popular tools for web development work. This plugin is also compatible with Genesis Framework and you can quickly develop a site. So I’m replacing the default Genesis child theme header with custom one using Beaver Builder plugin.

Step 1: Creating a template

  • Login to Dashboard
  • Navigate to Settings->Page Builder and enable the “Template” feature
  • Navigate to Builder -> Templates and create a new template
  • Publish the template

Step 2: Add a simple snippet

Open the functions.php file of your child theme and add this small snippet at end of the file.

 

Make the menu sticky on mobile devices

Original request was

Sticky Menu Query

Please follow the steps at below:

Step 1: Open the style.css file on Notepad+ or any other editor, go to media queries section (my end line no 2890-2893) and remove the following CSS:

Step 2: Go to gbeaver/assets/js folder and open the gbeaver-scripts.js file. Now replace this existing code

WITH

Creating Shrink Header on GBeaver Theme

Sticky header effect is inbuilt in GBeaver Theme. Using this option you can easily add the shrink effect at your site header.

Step 1: Enabling the sticky header effect.

Login to Dashboard, navigate to GBeaver options page and expend the General Settings section. Enable the Sticky Header feature. Click on “Save  Changes” button and save the settings.

Sticky Site Header

Sticky Site Header

Step 2: Adding Some Custom CSS

Open the style.css file from gbeaver folder and add the following CSS.

Step 3: Editing the JS file

This is the last steps. Open the gbeaver-scripts.js file from assets/js folder and replace the following JS code

WITH

All done now. Refresh your site now and checkout the shrink header effect.