Logo - no shrink on resize but yes shrink on scroll

[Lorenmn]

Hi,
I have a sticky nav bar here > http://77.104.171.165/~theweb53/littleturtleswimcompany.co.uk/

When you resize the page (e.g. for tablet etc), the logo shrinks. I want it to be the same size.

I also have it as a sticky nav bar and when you scroll, that’s when I’d like the logo to shrink, OR, disappear. Not sure which I prefer at the moment.

Can you help?
Thanks,
Loren

[rad]

Hi Loren,

Thanks for reaching out.

It doesn’t shrink when I scroll, but yes, it shrinks on when I resized down the browser.

But, the issue is the menu items, it’s long that it won’t fit horizontally so the image only responds to it. This is will happen if you’ll force it with static/fixed width.

It’s either remove some menu items to give more room to the image or display a mobile header bar on tablets too instead of just for mobile.

Still, if you don’t wish for it to shrink, you can always set its width to 150px.

Hope this helps.

[Lorenmn]

Hi.
Thanks for your reply. I DO want the logo to shrink when the user scrolls but don’t know how to do it. I’m happy for it NOT to shrink if the window is resized.

Is this possible?

[nabeel]

Hi again,

Try this, first add the following code in the Theme Options > JS:

jQuery(document).ready(function($){
	$(window).scroll(function(){
		if ($(this).scrollTop() > 180) {
			$('.x-masthead .x-image').addClass('resize-logo');
		} else {
			$('.x-masthead .x-image').removeClass('resize-logo')
		}
	});
});

Then add the following code in the Theme Options > CSS:

.resize-logo {
    width: 100px !important;
    top: 20px;
    position: relative;
    transition: width 0.3s ease-in-out;
}

.x-masthead .x-image {
    transition: width 0.3s ease-in-out;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[Lorenmn]

That works. Thanks. But is there a way to reduce the amount of white space at the top when the logo shrinks on scroll?

[jade]

Hi Loren,

Did you have the Sticky Bar setup enabled on the header? If so, try changing the value of the Shrink Amount setting.

Hope this helps.