Jump to content


Photo
Flatten

How to stop Navbar animation



  • Please log in to reply
6 replies to this topic

#1 montanauk

montanauk

    Member

  • Members

  • 24 posts
  • Country: Country Flag

Posted 06 January 2014 - 04:40 PM

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



#2 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 07 January 2014 - 01:51 AM

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;
}


#3 montanauk

montanauk

    Member

  • Members

  • 24 posts
  • Country: Country Flag

Posted 07 January 2014 - 09:16 AM

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



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 13021 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 07 January 2014 - 12:17 PM

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.



#5 tmeister

tmeister

    Super Member

  • Members

  • 159 posts
  • LocationValle de Bravo, México
  • Country: Country Flag

Posted 07 January 2014 - 04:02 PM

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.



#6 montanauk

montanauk

    Member

  • Members

  • 24 posts
  • Country: Country Flag

Posted 07 January 2014 - 04:18 PM

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



#7 tmeister

tmeister

    Super Member

  • Members

  • 159 posts
  • LocationValle de Bravo, México
  • Country: Country Flag

Posted 07 January 2014 - 04:26 PM

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

 

Best,

Enrique.







Also tagged with one or more of these keywords: Flatten