Skip to main content

Forums

This topic contains 2 replies, has 2 voices, and was last updated by  tracybags 1 week, 1 day ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #294194

    tracybags
    Participant

    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.

    #294506

    pquitian
    Participant

    Hi,

    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 :(

    #294520

    tracybags
    Participant

    Hi,
    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.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star