Archived topic
Menu resizing with transition effect when sticky
7 replies · Started by Tim on December 18, 2016
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;
}
Hi Tim,
What transition are you talking about exactly? I'm not seeing it.
Hi Tom,
Is is a small transition on the menu resizing, when you scroll down slowly you will see the menu resize by 20px
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;
}
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
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 :)
Tom,
Thanks for taking a look, I appreciate all the help you gave in getting the menu just right!
Glad I could help! :)
