[Resolved] Menu resizing with transition effect when sticky

Home Forums Support [Resolved] Menu resizing with transition effect when sticky

Home Forums Support Menu resizing with transition effect when sticky

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #255906
    Tim

    Hello,

    I thought I was done with my menu, then I looked at some of the showcase sites and found this
    http://kansasdataworks.com/wp/

    Tring to reproduce the graceful menu resizing when menu is sticky

    I used firebug and got the code below, the padding has been added but there is no transition happening when I scroll, pretty sure I have the wrong selector
    http://aaa.greaterthanthesum.com/

    Thanks

    .main-navigation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 20px 0;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    }

    #255944
    Tom
    Lead Developer
    Lead Developer

    Hi Tim,

    What transition are you talking about exactly? I’m not seeing it.

    #255974
    Tim

    Hi Tom,

    Is is a small transition on the menu resizing, when you scroll down slowly you will see the menu resize by 20px

    #255981
    Tim

    I got it, now the transition will work both ways

    .main-navigation{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 20px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    }

    .main-navigation.is_stuck {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 0 0;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    }

    #255992
    Tim

    Tom, I have a new question, the transition looks good except in Edge where the transition to the is_stuck menu causes the menu to flash

    Is there anything that can prevent this
    http://aaa.greaterthanthesum.com/

    Thanks

    #256056
    Tom
    Lead Developer
    Lead Developer

    Edge has tons of rendering bugs still – it’s not worth tweaking code to play nice with it as they’ll (hopefully) smooth those out as time goes on.

    However, I took a look and it looks great in Edge, didn’t notice anything bad. Your site looks great ๐Ÿ™‚

    #256274
    Tim

    Tom,

    Thanks for taking a look, I appreciate all the help you gave in getting the menu just right!

    #256338
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.