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
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.
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.
Hey @Sandberg,
Please copy your site to a staging server and we’ll test without the effects of third-party plugins.
Thanks.
Hi Christian,
Unfortunately we dont have the possibility to copy it to a staging site but if you need to temporarily disable plugins to see what is causing the error that’s no problem
Hey @Sandberg,
I’m not sure what’s the cause so rebuilding would be the solution for your header. I’ve tested it and it works (see URL in the secure note).
Hi again,
Alright, thank you for the advice, it’s working much better now and I’m almost done, I just have a few more problems I cant figure out:
How can I give the logo some breathing room when it’s shrunk due to scolling?? I tried adding both margin and padding to both the logo and/or container but it didnt work as it just shrinks the logo.
How can I get the logo centered on laptop screen width? The flexbox of the Bar is currently set to “Space Between” on all devices apart from Base breakpoint and it looks good on all devices apart from the Laptop one. If I set it to e.g. Center, the problem is that the dropdown goes into the center as well.
Thank you!
Maybe its more clear what I mean with “breathin room” in mobile view.
Hey Pontus,
Add some top and bottom padding to your Container 2:
This should give some space above and below the logo image.
Cheers.
and do you have any idea how we can fix the centering of logo and left alignment of hamburger menu that I mentioned above?
Thanks in advance!
That is expected. You will need more Bar Height so your logo will have a “breathing room” while maintaining a certain logo height.
Let’s clear this issue first.
Thanks.
Hi again,
I made some tweaks according to your recommendations and it looks good now, thank you!
There is however a sideways scrollbar that appears on mobile on the site now, I think it has something to do with the dropdown menu but I’m not sure what the problem is? Do you have any idea? Live url is finanzas.abc.es