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 –

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.

(function($) {

		offset: 45,
		tolerance: 5

	// to destroy


Step 3: Initializing these three JS files

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

add_action( 'wp_enqueue_scripts', 'wpbw_enqueue_headroom_scripts' );
function wpbw_enqueue_headroom_scripts()
	wp_enqueue_script( 'headroom-min', FL_CHILD_THEME_URL . '/js/Headroom.js', array( ), '1.0', true );
	wp_enqueue_script( 'jquery-headroom', FL_CHILD_THEME_URL . '/js/jQuery.headroom.js', array( 'headroom-min' ), '1.0', true );
	wp_enqueue_script( 'headroom-init', FL_CHILD_THEME_URL . '/js/headroom.init.js', array(), '1.0', true );

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.

.fl-page-header {
	will-change: transform;
	-webkit-transition: transform 500ms linear;
	-moz-transition: transform 500ms linear;
	transition: transform 500ms linear;

.headroom--pinned {
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	transform: translateY(0%);

.headroom--unpinned {	
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);


  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

    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

You must be logged in to post a comment.


Get free weekly PRO Beaver Builder Tutorials