Make logo in header shrink on scroll

Hi,

How can I make my logo in the header shrink on scroll? I set the bar holding the logo shrink and updated the image setup to scaling but no matter what I try, the image doesnt change size.

Thank you for your help!

Hello @Sandberg,

Thanks for writing to us.

I would suggest you go to the Header bar-> Sticky->Shrink Amount, set the amount here.

Hope it helps
Thanks

Hi Prakash,

That shrinks the bar, but the logo inside of it doesnt shrink, any idea why?

the logo is an image just to be clear

Hello Pontus,

How wide is your Logo image? You may need to use a little CSS for that. Kindly check out this old thread: Pro Header - Sticky Bar - How To Shrink Logo In Sticky Bar On Scroll

If that is not helping, we would be happy to double-check your site if we can log in. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

image

Best Regards.

Hi,

Unfortunately, the CSS in the suggested thread didn’t work. I added a user for you in a secure note.

Hey @Sandberg,

The Scaling option in the Image element should do the job. If it doesn’t, that means there’s some setting or custom CSS affecting the image. Kindly provide the URL of the page where we can see the shrinking header and we’ll check image issue.

image

Hi again,

Sorry, I never meant to send the last message as I needed to reload the page and then it worked. There are however some problems with it:

  • I want Bar 2 to also be sticky under Bar 1 but when making it sticky, Bar 1 becomes very large when scrolling.
  • On mobile, Bar 1 becomes larger instead of smaller, and I dont think the logo shrinks either.

I can’t make any sense of it. I added the login information in a secure note now, if you can have a look I would really appreciate it.

Hey @Sandberg,

When sticky header is involved, the Bars’ Height must be set or not auto. Try setting it to 100px or something like that. The same applies to Bar 2.

Hi Christian,

I set Bar 1 to 100 px and bar 2 to 50px and I’m still having the same problem.