Docs

[IAmSuperMike]

Hi guys,

I have a requirement where I need to change the logo that is displayed for a screen below certain dimensions. Can you please advise on how I can do this?

Thanks,
Mike

[Christopher]

Hi there,

Do you have issue with logo size? If so we could help you with this.
Please provide us with URL.

Thanks.

[IAmSuperMike]

Yes I do,

The site is accessible through a temporary URL of: http://g8r81.hosts.cx — however the final URL (as reported in licensing after go live) will be profitsocietyfxc.com.

Thanks,
Mike

[Paul R]

Hi Mike,

I can’t seem to access your site.

Please try to regenerate a new testing url.

At the mean time you can try adding this in Custom > Edit Global CSS in the customizer

@media (max-width: 979px) {
.x-brand img {
    width: 200px;
}
}

Hope that help.

[IAmSuperMike]

Sorry about that. There was an issue with the host, The testing url is back up.

I had already added the css above. My question is how I can use this to replace the image when the dimensions are above/below the Max-width

[Joao]

Hi There,

I dont understand what you are trying to achieve? Could you clarify? You would like to replace your logo depending on the screensize?

Let us know more details,

Thanks

[IAmSuperMike]

yes. that is exactly what I am trying to achieve.

I have two logos. For arguments sake well say the paths are: /wp-content/uploads/2017/01/LogoA.png and /wp-content/uploads/2017/01/LogoB.png.

From a Computer I would like LogoA.png to be the the sites logo. From a mobile device I would like LogoB.png to be the logo

[Rue Nel]

Hello There,

Thank you for the clarifications. You can safely switch the logo image by way of using Javascript. Please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

(function($){
  $(document).ready(function(){
    var W = $(window).width();

    if ( W > 979 ) {
      $('.masthead-stacked .x-brand img').attr('src', '/wp-content/uploads/2017/01/LogoA.png');
    } else {
      $('.masthead-stacked .x-brand img').attr('src', '/wp-content/uploads/2017/01/LogoB.png');
    }
  });
})(jQuery);

As this is all custom development, regretfully we won’t be able to assist further. Custom development is outside the scope of our support. We’re happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation.

Thank you for your understanding.

[IAmSuperMike]

Awesome, I will test this out asap. Thank you!!

[Rahul]

You’re most welcome!

We are always here standing by to assist you in anyway.

Thanks!

[IAmSuperMike]

Hi Rahul,

The JS code given above doesnt seem to work, can you take advise? login detail to follow

Regards,
Mike

[IAmSuperMike]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for updating in! Please be advised that the code I gave will only work upon loading the page. This will not take effect as you resize your browser. If you want, you can update the code and make use of this code instead:

(function($){
  $(document).ready(function(){
    var W = $(window).width();

    if ( W > 979 ) {
      $('.masthead-stacked .x-brand img').attr('src', '/wp-content/uploads/2017/01/LogoA.png');
    } else {
      $('.masthead-stacked .x-brand img').attr('src', '/wp-content/uploads/2017/01/LogoB.png');
    }
  });

  $(window).on('load resize', function(){
  	var W = $(window).width();

    if ( W > 979 ) {
      $('.masthead-stacked .x-brand img').attr('src', '/wp-content/uploads/2017/01/LogoA.png');
    } else {
      $('.masthead-stacked .x-brand img').attr('src', '/wp-content/uploads/2017/01/LogoB.png');
    }
  });
})(jQuery);

We would loved to know if this has work for you. Thank you.

[IAmSuperMike]

turns out this was my error. I had the same logo for LogoA.png and LogoB.png. However the new code you provided is much better!! Thanks

[Thai]

If you need anything else please let us know.

[Author]

Posts