- This topic has 7 replies, 2 voices, and was last updated 7 years, 3 months ago by Tom.
-
AuthorPosts
-
December 18, 2016 at 9:12 am #255906Tim
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;
}December 18, 2016 at 11:09 am #255944TomLead DeveloperLead DeveloperHi Tim,
What transition are you talking about exactly? I’m not seeing it.
December 18, 2016 at 12:39 pm #255974TimHi Tom,
Is is a small transition on the menu resizing, when you scroll down slowly you will see the menu resize by 20px
December 18, 2016 at 12:58 pm #255981TimI 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;
}December 18, 2016 at 1:32 pm #255992TimTom, 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
December 18, 2016 at 11:04 pm #256056TomLead DeveloperLead DeveloperEdge 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 ๐
December 19, 2016 at 12:41 pm #256274TimTom,
Thanks for taking a look, I appreciate all the help you gave in getting the menu just right!
December 19, 2016 at 10:51 pm #256338TomLead DeveloperLead DeveloperGlad I could help! ๐
-
AuthorPosts
- You must be logged in to reply to this topic.