Add Headroom.js in Beaver Builder Theme’s Header

What is the 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/

Step 1: Uploading Headroom js file into child theme folder

Download the Headroom.js and jQuery.headrom.js file from Github and upload into your beaver builder child theme’s js folder (you will create this folder, if you have not).

Step 2: Creating a new JS file

Creating a new js file “headroom.init.js” and saving into js folder. Here is the full code of this JS file.

Step 3: Initializing these three JS files

Open the functions.php file of your bb child theme and add this snippet

Step 4: Adding some custom CSS

Open the style.css file and add this new CSS. It will add smooth sliding effect at your header.

6 Comments

  1. Kevin Pryce on February 27, 2018 at 8:25 pm

    I have followed this article exactly on a fresh installation of WP. The 3 JS files are being called properly in the source code but the effect is not working. Are there any customizer settings to consider in order to work?

    • WP Beaver World on February 28, 2018 at 2:50 am

      Are you created the header with Beaver Themer? are you using the BB theme?

    • Kevin Pryce on February 28, 2018 at 8:32 pm

      Beaver themer is not installed. Trying with default settings on Beaver Builder theme. As I mentioned, the 3 headroom files are being loaded (I confirmed by viewing source).

  2. paul on August 1, 2017 at 7:02 pm

    Hi,
    How would this work for a custom beaver themer header?
    Would it just be switching out .fl-page-header for the new class?

    • WP Beaver World on August 4, 2017 at 2:32 pm

      You will replace the fl-page-header class with your custom header class. Then it will work perfectly.

Leave a Comment





Newsletter

Get free weekly PRO Beaver Builder Tutorials

shares