Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • May 3, 2014 at 1:08 am #259580
    dustingrof

    I have followed the solution on this page

    https://kriesi.at/support/topic/align-main-navigation-to-bottom-on-large-navigation/

    It is almost working perfectly, but there is a slight glitch. While the header is shrinking, the line height remains at 200px until the .header-scrolled class is added to the header element. After the class is added, it jumps up to the 58px line-height. So for some part of the scrolling, the navigation is sitting outside the header. 

    .av-main-nav > li > a { line-height: 200px !important; }
.header-scrolled .av-main-nav > li > a { line-height: 58px !important; }

    Is there a way to make the transition from 200px to 58px appear smoothly?

    Thanks,

    D

    May 3, 2014 at 4:42 pm #259725
    Yigit

    Hi dustingrof!

    Please add following code to Quick CSS as well

    .av-main-nav > li > a { transition: line-height 0.9s ease-in-out; -webkit-transition: line-height 0.9s ease-in-out; -moz-transition: line-height 0.9s ease-in-out; -o-transition: line-height 0.9s ease-in-out; }
.header-scrolled .av-main-nav > li > a { transition: line-height 0.9s ease-in-out; -webkit-transition: line-height 0.9s ease-in-out; -moz-transition: line-height 0.9s ease-in-out; -o-transition: line-height 0.9s ease-in-out; }

    Regards,
    Yigit

    May 5, 2014 at 12:06 pm #260199
    dustingrof

    Thanks!

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Fixed Header, Bottom Aligned Navigation, Shrinking Problem’ is closed to new replies.