• 0
Sign in to follow this  
Followers 0

Flatten How to stop Navbar animation

Question

Posted · Report post

Hey guys,

 

Would anyone know how to stop the navbar from animating. I am using the Flatten theme and when you load a page for the first time the navbar is quiet big but shrinks as you scroll. The transition (animation) is not smooth and is causing me all sorts of problems (with no documentation or recommendations). So i just want to stop it and your help is appreciated.

 

Thanks

Share this post


Link to post
Share on other sites

6 answers to this question

  • 0

Posted · Report post

Hi there, this is coming from a series of pre-set hieghts in the css from what I can see. Change the figures below to one static figure and then there should be no change. Once you have changed the figures copy/paste into your custom css panel and save.

 

.section-flat-nav .flat-logo img {
    max-height: 100px;
    min-height: 60px;
    min-width: 150px;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi James B,

 

Thanks for your reply. This works well by only managing the image/logo, but what about the rest of the whole menu (ie,. menu items,nav bar height and animation)  ?

 

Thanks again

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

This is related to the Flatten theme as far as I am aware. Therefore, I have moved your topic to the correct forum location.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

The menu animation is JS driven if you want disable the animation you will need update the source file:

 

in ../wp-content/themes/flatten/sections/flat-nav/flat-nav.js around the line 20 remove or comment all the follow lines:

$(window).scroll(function(event) {

            if(window.loadingproject){return}

            var newHeight = 100 - ($(window).scrollTop());
            var newPadding = ( 40 - ($(window).scrollTop()) / 2);
            newPadding = ( newPadding < 20 ) ? 20 : newPadding;
            var newAlpha = (newPadding + 65) / 100;
            var color = (newAlpha < 1) ? '240, 242, 244' : '255, 255, 255';
            var border = (newAlpha < 1) ? '#ddd' : '#fff';

            $('.flat-logo img').height(newHeight);
            $('.flat-menu > li > a').css({'padding': newPadding+'px 15px'});
            $('.section-flat-nav').css({'background': 'rgba('+color+', '+newAlpha+')', 'border-bottom': '1px solid '+border} );
            $('.mobile-icon').css({'margin': newPadding+'px 0px'});

            if( jQuery('body').hasClass('display-boxed') ){
                if( newAlpha < 1 ){
                    jQuery('.section-flat-nav').css({'top':'0px'});
                    $('.mobile-icon').css({'margin': '-10px 0px'});
                }else{
                    jQuery('.section-flat-nav').css({'top':'30px'});
                }
            }

    }); 

Best,

Enrique.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks tmeister,

 

It is a nice feature to have, i am only disabling it because the transition/animation is not smooth.

 

What logo dimensions do you recommend for best effect (currently is 144x43 px) ?

 

Thanks

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

The demo site logo ( http://dms.tmeister.net/flatten/ ) is  250x100px if you want support retina displays then 500x200px.

 

Best,

Enrique.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0