Header Logo/Banner

I am having an issue with adjusting the home page header area. I love the look when you scroll and it turns a different color BUT my issue is my logo when you are scrolled to the top of the page. I have my logo at the suggested 250x250 but it is HUGE in the header.

Is there anyway I can have a different logo when it is not scrolled down?

Hi,

Can you share your site URL here?

Hi - Yes of Course!!!

Thank you!

http://185.225.236.102/~bearnece/haleekalevitch.com/

Hi, do you mean that you want to keep the size logo when the page scrolled?

To do this, you can add this javascript code using this plugin

jQuery(window).scroll(function() {
  var scrollTop = jQuery(window).scrollTop();
  if ( scrollTop > 0 ) { 
    jQuery('.sticky-wrapper img.custom-logo').attr('src', 'SCROLLED IMAGE PATH HERE')
  }else{
    jQuery('.sticky-wrapper img.custom-logo').attr('src', 'DEFAULT IMAGE PATH HERE')
  }
});

Hi,

It’s okay if you need our assistance here to build your website. We will try our best to help you and we are glad to help you.

But, please note, one new post for one question/issue. So, when other users have a similar issue, they can search easily in this forum :slight_smile:

About the logo issue, did you already implement my advice above? If it’s not working, can you please to keep it in your site and let me check what is not working?

I AM SO SORRY! Yes of course! It is now live with your edits.

I have attached an image of what I am hoping it can look like.

Thank you so much for still helping me!

Hi,

Can you please to set the correct image path in this script?

jQuery(window).scroll(function() {
  var scrollTop = jQuery(window).scrollTop();
  if ( scrollTop > 0 ) { 
    jQuery('.sticky-wrapper img.custom-logo').attr('src', 'SCROLLED IMAGE PATH HERE')
  }else{
    jQuery('.sticky-wrapper img.custom-logo').attr('src', 'http://185.225.236.102/~bearnece/haleekalevitch.com/wp-content/uploads/2019/03/rsz_hk_consulting_white_2.png')
  }
});

Please put the your new image path by replace SCROLLED IMAGE PATH HERE text

jQuery('.sticky-wrapper img.custom-logo').attr('src', 'SCROLLED IMAGE PATH HERE')

It is still:

  • too big (I want it to be the same size as when it is scrolled)
  • After 3 scrolls it sticks & is showing a broken image

Thank you!!

Hi there.

  1. You still didn’t change the image path for the scrolled page


    That’s why it displays a broken image

  2. You said that you want to use another image when the page scrolled, then please change this text SCROLLED IMAGE PATH HERE with your new image path.

jQuery('.sticky-wrapper img.custom-logo').attr('src', 'SCROLLED IMAGE PATH HERE')

I do not want a different picture there… I want the same logo and the same size. Remember this picture b8f39dc61cec6a27fdd371966dba0427fe80de1c_2_690x330

See how both views have the same icon and they are the same size

Oh I am sorry, if you don’t want to have different logo when the page scrolled, please rollback / remove this change. We don’t need javascript line here.

And you only need to implement this CSS code below:

#masthead-sticky-wrapper img.custom-logo {
    max-width: 60%;
}
#masthead-sticky-wrapper.is-sticky img.custom-logo {
    max-width: 60%;
}

Put the code into Customize > additional CSS

Thank you so much for that help!

But now in mobile view the logo is still HUGE and has a black header banner.

THANK YOU AGAIN!

HK Consulting

(619)246-0402

www.haleekalevitch.com

Hi,

I just visited your site on desktop and mobile screen. Looks like you already resolve the issue?

No the banner is still very large and black

Hmm Please try to add this CSS code below:

@media only screen and (max-width: 1024px){
  .site-branding .custom-logo {
    max-width: 50%;
  }
  .site-header {
    background-color: #ead475 !important;
  }
}

THANK YOU SO SO MUCH! You are AMAZING!

1 Like