Logo header transparency

Hello,

I have a two word darkBlue-darkYellow logo image without background.

I’d like it to glow a bit since on dark images it doesn’t stand out.

How can I do this?

Also: the Menu is white but becomes invisibile as you scroll since the bg is also white.

Thanks,
GG

Hello GG,

To change the logo image upon scrolling when dark menu backgroud is appearing, try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
jQuery(function($) {

  var newLogo = 'https://yoursite.com/path/to/light-logo.png';
  var oldLogo = $('.site-logo').attr('src');
  
  $(window).on('load scroll', function() {
    var y = $(this).scrollTop();
    if ( y >= 107 ) {
      $('.site-logo').attr('src',newLogo);
    } else {
      $('.site-logo').attr('src',oldLogo);
    }
  });

});

Replace this https://yoursite.com/path/to/light-logo.png with your second logo. You have to upload it first to your site’s media library (Dashboard > Media).

  1. Update

Regards,
Kharis

Hi Kharis,

I tried to no avail: my logo stays visible but with no brighter background - unfortunately the images I need are all dark. Any chance to create a halo like effect under the logo? Like a while glow around the logo so it stands out.

Thanks,
GG

Hello GG,

Please share me a link to your site to help me inspect and troubleshoot it. Ensure the custom jQuery code remains there.

Regards,
Kharis