Do you want to show the different logo on down scroll at your site header? Are you thinking how to do this using Beaver Themer? I am sharing this advanced tutorials for BB users. An alternative logo will appear when you will do the down scroll.

Creates a site header

First creating the site header using the Beaver Themer addon. Follow the video:

I added “logo-1” and “logo-2” CSS class into the two modules. You can change it as per your mind.

Adds Custom CSS

Need some custom css which will toggle the logo. Open the style.css file of your child theme and add the following CSS there

Different Logo CSS

/* Different Logo
-------------------------------- */

body:not(.fl-builder-edit) header.fl-builder-content .logo-1,
body:not(.fl-builder-edit) header.fl-builder-content .logo-2 {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
}

body:not(.fl-builder-edit) header.fl-builder-content:not(.fl-do-scroll) .logo-2 .fl-module-content, 
body:not(.fl-builder-edit) header.fl-builder-content.fl-do-scroll .logo-1 .fl-module-content {
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);
}

@media (min-width: 768px ) {
	header.fl-theme-builder-header-shrink img {
		max-height: 100%!important;
	}

	body:not(.fl-builder-edit) .different-logo .fl-col-content {
		position: relative;

		will-change: transform;
		-webkit-transition: transform 0.12s linear;
		-moz-transition: transform 0.12s linear;
		transition: transform 0.12s linear;

		height: 100%;
	}

	body:not(.fl-builder-edit) header.fl-builder-content:not(.fl-do-scroll) .logo-1 .fl-module-content, 
	body:not(.fl-builder-edit) header.fl-builder-content.fl-do-scroll .logo-2 .fl-module-content {
		opacity: 1;
		filter: alpha(opacity=100);
		-webkit-transform: translateY(0%);
		-moz-transform: translateY(0%);
		transform: translateY(0%);	
	}
}

You will change the “logo-1” & “logo-2” CSS class name if you are using your own CSS class name.

Created & Enqueue  new JS File

Creates a new js file “different-logo.js” and put it into “js” folder. This JS script adds/removes the custom CSS class from header markup based on up & down scroll.

Here is the complete code of this JS file.

JS file for different logo

(function($){

	DifferentLogo = {
		init: function()
		{
			this._bind();
		},

		_bind: function()
		{
			if( $('header.fl-builder-content').length != 0 )
			{
				if( $(window).width() > 767 )
					this._doScroll();

				$(window).resize(function(){
					if( $(window).width() > 767 ){
						DifferentLogo._doScroll();
					}
				});
			}
		},

		_doScroll: function()
		{
			var hdElm 	= $('header.fl-builder-content');
			var headerH = hdElm.height();

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

	$(function(){
		DifferentLogo.init();
	});

})(jQuery);

Now loading this JS file on the site by wp_enqueue_scripts hook. Opening the functions.php file and adding this PHP snippets at end of the file:

Enqueue the JS fie

add_action( 'wp_enqueue_scripts', 'probb_enqueue_scripts', 1005 );
function probb_enqueue_scripts()
{
	wp_enqueue_script( 'different-logo', get_stylesheet_directory_uri() . '/js/different-logo.js', array(), '1.6', true );
}

All Done. Now refresh the site and see the 2nd logo after down scrolling the window.