Do you want the different Beaver Themer header layouts on scroll at your site? First header layout will replace with second new header layout when user will do the down scroll. Are you wanting this? Here is the simple tutorial about this. Follow the step by step instructions at below.

Minimum Requirement

1. WordPress
2. Beaver Themer compatible WordPress Theme like Beaver Builder Theme, Genesis, GeneratePress etc
3. Beaver Builder Plugin
4. Beaver Themer Addon

Creates JS script

Creates a new JS file “different-header.js” and save it into your child theme’s js folder. This JS file is adding a toggle class “fl-do-scroll” into header markup. Based on this class you will get two different types of header on your site. Here is the full code of this JS file

Different header JS script

(function($){

	DifferentHeader = {
		_doScroll: function()
		{
			var slmHD 	= $('.slim-header');
			var bigHD 	= $('header.fl-builder-content .big-header');
			var headerH = 0;

			$('header.fl-builder-content .fl-row').each(function(key,val){
				headerH = headerH + $(this).height();
			});

			$(window).on('scroll', function(event){
				var st = $(this).scrollTop();
				if (st > headerH){
					slmHD.addClass('fl-do-scroll');
					bigHD.addClass('fl-do-scroll');

					if ( $('body').hasClass('admin-bar') )
					{
						$('.slim-header').css({'top' : $('#wpadminbar').height() });
					}
				} else {
					slmHD.removeClass('fl-do-scroll');
					bigHD.removeClass('fl-do-scroll');

					if ( $('body').hasClass('admin-bar') )
					{
						$('.slim-header').css({'top' : '0' });
					}
				}
			});
		}
	};

	$(function(){
		if( $('header.fl-builder-content .big-header').length > 0 )
		{
			if( $(window).width() >= FLBuilderLayoutConfig.breakpoints.small )
				DifferentHeader._doScroll();

			$(window).on( 'resize', function(){
				if( $(window).width() >= FLBuilderLayoutConfig.breakpoints.small )
					DifferentHeader._doScroll();
			});
		}
	});

})(jQuery);

Enqueue The JS file

Loading the above JS file on front end using the wp_enqueue_scripts hook. Open the functions.php file and add this PHP snippets at end of the file

Enqueue the JS file

add_action( 'wp_enqueue_scripts', 'probb_enqueue_script_different_header', 1005 );
function probb_enqueue_script_different_header()
{
	wp_enqueue_script( 'different-header', get_stylesheet_directory_uri() . '/js/different-header.js', array(), '1.6.1', true );
}

Creates Custom CSS

Adds the some custom CSS file in your style.css file. This new CSS codes will hide the first header and display the 2nd header on scroll. Here is the CSS snippet:

Custom CSS

/* Different Header
-------------------------------- */

body:not(.single-fl-theme-layout) .fl-builder-content .slim-header {
	transition: opacity 0.5s ease-in-out;
	-moz-transition: opacity 0.5s ease-in-out;
	-webkit-transition: opacity 0.5s ease-in-out;
	-o-transition: opacity 0.5s ease-in-out;

	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}

body:not(.single-fl-theme-layout) .slim-header:not(.fl-do-scroll),
body:not(.single-fl-theme-layout) .big-header.fl-do-scroll {
	opacity: 0;
	filter: alpha(opacity=0);
	z-index: 0;
}

body:not(.single-fl-theme-layout) .big-header:not(.fl-do-scroll),
body:not(.single-fl-theme-layout) .slim-header.fl-do-scroll {
	opacity: 1;
	filter: alpha(opacity=100);
	z-index: 3;
}

body:not(.single-fl-theme-layout) .slim-header.fl-do-scroll {
	z-index: 2;
}

Builds Two Different Themer Header Layouts

Make sure that you already installed Beaver Themer addon and activated it. Now follow this video:

If you check the video you can see that I added two new classes “big-header” & “slim-header” at row settings class field of two headers. You can change these class name as per your mind. If you do this then you will replace all “big-header” & “slim-header” with new CSS class name in CSS and JS files also. Otherwise functionality will not work.

---

Live Demo