Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS logo scale on sticky header

  • This topic is empty.
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)
  • The forum ‘CSS’ is closed to new topics and replies.