Jump to content


This topic is now archived and is closed to further replies.


How to stop Navbar animation

Recommended Posts


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.



Share this post

Link to post
Share on other sites
James B

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;

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post

Link to post
Share on other sites

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



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

Please search our forums, before posting!

Share this post

Link to post
Share on other sites



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) {


            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 ){
                    $('.mobile-icon').css({'margin': '-10px 0px'});




Enrique Chavez - Premium DMS Themes, Sections and Plugins.


Share this post

Link to post
Share on other sites

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) ?



Share this post

Link to post
Share on other sites

  • Similar Content

    • Rebecca Rinas
      By Rebecca Rinas
      I want my separate tabs to stay open with the collapser flat plugin - they don't show up until you hover over them. Anyone know how to make all of them visible?Thanks
    • kate1000
      By kate1000+
      http://www.kate1000.com   - Theme Flatten - Pagelines pro - DNS
      Love my responsive site - I don't have a " mobile url" because my site is responsive. - but on mobile, my site opens to a blank wordpress with a horrid menu. The viewer  has to navigate to some--> tiny tiny light blue link that says " see full site". <-- To see my site -
      I don't know if this is a pagelines issue, a flatten template theme issue , a wordpress issue or hosting issue, or dns issue. 
      How can I make my full responsive template site -> be  <- the site they see right away? instad of that untemplated linked wordpress page.
      Did I mention net week I have an interview and a few key folks  will be looking at my site over the week - omg  - 
      Thank you anyone who can help!! 
    • meanmcbean
      By meanmcbean
      Hi, I am using DMS2 - and Wordpress 4.2.2., not Flatten but could not see how else to post this topic.  I recently bought the Video Slider plugin and after I uploaded and activated it, my site won't load (this is what I see... Oops, There may be an issue loading.
      DMS typically loads in less than 5 seconds. Please check for Javascript or PHP errors.
      (Typically, slow or incomplete loading is related to plugin conflicts or server issues.)
      View the Troubleshooting Guide  
      I thought the problem was probably a conflict with my site's other plugins, so I deactivated each plugin one by one.  That was not the problem.  The culprit itself is the Video Slider plugin.  I then tried to upload the plugin on my other sites and still have the same problem.  Not sure what to do next to resolve this.  Here's my url - http://www.lorilaws.net/ Thanks in advance.
    • alisamski
      By alisamski+
      I'm crossposting here... as Flatten uses the portfolio section...
      I purchased the portfolio section separately, and wanting to use it with my site which is about to go from Frameworks to DMS..
      Please advise if there are updates to the section so I can incorporate it...
      I love the portfolio!
    • Eppi
      By Eppi
      I have a problem with the icons from the solid footer menu and also in another part of my site. The Icons are not shown there. Can you help me and let me know what to do to get it solved?
      Thanks and best regards