- This topic is empty.
-
AuthorPosts
-
August 11, 2019 at 4:00 pm #294194tracybagsParticipant
Hello. I am using Bento theme in WordPress. I have sticky header enabled. This theme doesn’t have the feature where the logo scales smaller as you scroll and the header becomes sticky, and scales back to full size if you scroll back to the top of the page. The theme author gave me a snippet to emulate this, but the result is that it swaps the image rather than scales it and it doesn’t look great.
The snippet I was given was:
}
.site-header.fixed-header img.logo-fullsize {
max-width: 180px;
}The website is at https://pantoloons.com
Does anyone know of any CSS snippet that might achieve what I”m after?
Many thanks.
August 16, 2019 at 4:41 am #294506pquitianParticipantHi,
Try adding this:
.site-header.fixed-header img.logo-fullsize {
max-width: 180px;
-moz-transition: all .4s ease-in-out;
-webkit-transform: translate3d(0,0,0);
transition: all .4s ease-in-out;
}However, inspecting the code I see that the template is using two diferent headers and shows one or another instead adding a fixed class to use a single header… For this reason, you should add this snippet:
.site-header.no-fixed-header img.logo-fullsize {
-moz-transition: all .4s ease-in-out;
-webkit-transform: translate3d(0,0,0);
transition: all .4s ease-in-out;
}
So, maybe you’ll find some difficults to do a fluid animation.
I’ll try to find an elegant fix for your issue. Sorry in this moment I can’t spend more time :(August 16, 2019 at 11:11 am #294520tracybagsParticipantHi,
Thank you so much for your reply. I tried the second snippet you gave but that didn’t have any effect. I then tried the first snippet you gave and that looks so lovely and ALMOST there! The easing is working but it does a little “double take’ as you first scroll. I have left it in this condition so you can see.Because of the way you have phrased your reply to me I thought it might be a case of one or the other and that your first snippet should be the one used but then because I have the double header thing going on I should use the second one. So I also tried removing the snippet my developer gave me, but this resulted in no easing effect at all. So as it is at the moment is great with your snippet except for the little glitch at the beginning.
I’m going to leave it like this so you can see it in the hope that you may have time to respond.
Thank you so much.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.