Docs

[yhshin1020]

Hey,

I want to display a different header logo on mobile.

I have tried solutions from other threads, mostly i’ve pasted this code:

if ($(window).width() < 980){
    $(".x-brand img").attr("src", "http://www.guidedogssg.com/wp-content/uploads/2016/07/unnamed.png")
}

in my Customiser > Javascript along with the syntax.

However, on mobile, the desired logo is not showing up.

I have a javascript that makes the header change color and height when you scroll down, I don’t know if this is causing the complication.

Anyways, could you help me successfully set up a different logo on mobile header menu?

Thanks.

i’ve attached a picture below to illustrate what it should look like.

[yhshin1020]

This reply has been marked as private.

[Thai]

Hey There,

The logo looks fine on my end:

http://i.imgur.com/pInnjf8.png

Please clear your cache and try again.

Regards!

[yhshin1020]

Try scrolling down and scrolling back up.

The logo goes back to the normal logo.

Thanks.

[Thai]

Hey There,

Everything should be fine now.

I changed your custom JS to this:

jQuery(function($) {

	$('.x-navbar-fixed-top').css("background-color", "transparent");

	$(window).scroll(function(){
		
		if( $(window).width() < 980 ) return false;

		if ($(this).scrollTop() >10) {
			$('.x-navbar-fixed-top').css("background-color", "#fff");
			$('.x-brand img').css("width", "70px");
			$('.x-navbar-fixed-top .x-brand img').attr('src','http://www.guidedogssg.com/wp-content/uploads/2016/07/unnamed.png');
		} else {
			$('.x-navbar-fixed-top').css("background-color", "transparent"); 
			$('.x-barnd img').css("width", "80%");
			$('.x-brand img').attr('src','http://www.guidedogssg.com/wp-content/uploads/2016/10/Untitled-1-1.png');
		}
	});

	$(window).scroll(function(){ 
		if($(window).scrollTop()<=0) {
			$('.x-navbar').removeClass("x-navbar-fixed-top");
		}
	});

	$('.page-id-1234 input[name="_wpcf7_checkbox_free_text_id:nation"]').attr('placeholder','Please Specify');
	$('.page-id-1234 input[name="_wpcf7_checkbox_free_text_id:lang"]').attr('placeholder','Please Specify');
	$('.page-id-1234 input[name="_wpcf7_checkbox_free_text_id:areas"]').attr('placeholder','Please Specify');

	var timelineBlocks = $('.cd-timeline-block'),
	offset = 0.8;

	//hide timeline blocks which are outside the viewport
	hideBlocks(timelineBlocks, offset);

	//on scolling, show/animate timeline blocks when enter the viewport
	$(window).on('scroll', function(){
		(!window.requestAnimationFrame) 
		? setTimeout(function(){ showBlocks(timelineBlocks, offset); }, 100)
		: window.requestAnimationFrame(function(){ showBlocks(timelineBlocks, offset); });
	});

	function hideBlocks(blocks, offset) {
		blocks.each(function(){
		( $(this).offset().top > $(window).scrollTop()+$(window).height()*offset ) && $(this).find('.cd-timeline-img, .cd-timeline-content').addClass('is-hidden');
		});
	}

	function showBlocks(blocks, offset) {
		blocks.each(function(){
		( $(this).offset().top <= $(window).scrollTop()+$(window).height()*offset && $(this).find('.cd-timeline-img').hasClass('is-hidden') ) && $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
		});
	}

	if ($(window).width() < 980) {
		$(".x-brand img").attr("src", "http://www.guidedogssg.com/wp-content/uploads/2016/07/unnamed.png")
	}

	jQuery(".page-id-1357 .x-brand img").attr("src","http://www.guidedogssg.com/wp-content/uploads/2016/07/unnamed.png");
});

Cheers!

[yhshin1020]

This reply has been marked as private.

[Rahul]

Hey There,

Thanks for writing back!

Your website and logo looks perfectly fine on my end. I’ve checked it on Android smartphone. I have also tried scrolling down and scrolling back up but the logo appears to be normal. See attached!

Try clearing your cache and give it one more try.

Let us know how it goes!

[Author]

Posts