Turning Off Twitter Bootstrap Navbar Transition Animation

Turning off Twitter Bootstrap Navbar Transition animation

Bootstrap accomplishes the transition animation of the responsive nav bar the same way it does any collapse, which is using a CSS3 transition. To turn off the transition for only the navbar (leaving any other transitions in place), you simply have to override the CSS.

I'd suggest adding a class, such as no-transition (but the name can be arbitrary) to your collapsible container

<div class="nav-collapse no-transition">

and then defining a CSS rule that will disable the CSS3 transition that Bootstrap defined (make sure your CSS rule is parsed after bootstrap.css):

.no-transition {
  -webkit-transition: height 0;
  -moz-transition: height 0;
  -ms-transition: height 0;
  -o-transition: height 0;
  transition: height 0;
}

But, don't stop there! Bootstrap's JavaScript is hard-coded to assume that a transition WILL take place if transitions are supported by the browser. If you just make the change above, you'll find that the collapsible object "locks" after one open/close cycle, because it is still waiting for the browser's transition end event to fire. There are two less-than-ideal ways to work around this:

First option: hack bootstrap-collapse.js to not wait for the transition end event. Messing with Bootstrap is never a great idea because it'll make future updates a pain for you. This particular work-around would also need to be similarly applied to any other Bootstrap JavaScript component onto which you wish to impart the no-transition class.

bootstrap-collapse.js:107

      this.$element.hasClass('no-transition') || (this.transitioning = 1);

Second, recommended, option: use an ultra-short transition time instead of disabling the transition. This doesn't quite remove the transition animation as you asked, but it accomplishes a similar result with likely no noticable negative impact on the performance of your low-powered mobile devices. The upside of this method is that you don't have to hack any Bootstrap JS files, and you can apply no-transition to any element, not just a collapse!

.no-transition {
  -webkit-transition: height 0.01s;
  -moz-transition: height 0.01s;
  -ms-transition: height 0.01s;
  -o-transition: height 0.01s;
  transition: height 0.01s;
}

disable Bootstrap's Collapse open/close animation

For Bootstrap 3 and 4 it's

.collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}

Bootstrap menu animation 'x' dont toggle to reset

It is because the button remains the focussed element.

EDIT:
I think this part is making it not turn back to normal:

header .navbar-iwebdesign .navbar-toggle:focus .top-bar
    {
    -webkit-transform: rotate(45deg);
    -webkit-transform-origin: 15% 85%; /* chrome */
    -webkit-transition: all 0.35s ease-in-out;
    }
header .navbar-iwebdesign .navbar-toggle:focus .middle-bar-transition-new
    {
    -webkit-transform: rotate(45deg);
    -webkit-transform-origin: 10.5px -1.5px; /* chrome */
    -webkit-transition: all 0.25s ease-in-out;
    opacity: 0.5;
    }

header .navbar-iwebdesign .navbar-toggle:focus .bottom-bar
    {
    -webkit-transform: rotate(-45deg);
    -webkit-transform-origin: 11% 10%; /* chrome */
    -webkit-transition: all 0.35s ease-in-out;
    }

If I were you, I would use jQuery to toggle a class instead.

EDIT:
Just add this to your menu.js:

$('.navbar-toggle').on('click', function() { 
    $(this).toggleClass('collapsed');
});

and change the above selectors in animation.css to:

header .navbar-iwebdesign .navbar-toggle.collapsed .top-bar
header .navbar-iwebdesign .navbar-toggle.collapsed .middle-bar-transition-new
header .navbar-iwebdesign .navbar-toggle.collapsed .bottom-bar

Navbar Collapse Toggle Won't Turn Off (after switching from bootstrap v4 beta to v4 alpha 6)

You are missing navbar-toggleable-* on your nav element.

<nav style="background-color: #e3f2fd;" class="navbar navbar-toggleable navbar-expand-md navbar-light fixed-top">

You can see correct example in bootstrap documentation here:

https://v4-alpha.getbootstrap.com/components/navbar/

Navbars require a wrapping .navbar with .navbar-toggleable-* for
responsive collapsing and color scheme classes.

Turn off Bootstrap's CSS3 transitions on progress bars

You can turn off the transition effects by setting the css transition rule to none, like so:

.progress .bar {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}​

Disable dropdown menu transition effect (JS)

Possibly a duplicate of this which is a duplicate of this post

If you don't want to jump over and read, here's the CSS that you should add:

.collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}

Don't forget to search for an answer first before posting questions.

EDIT:
You're correct that your site is using JS/jQuery to do this. The function is in the my-js.js file and is this function:

$(document).ready(function(){
    $(".dropdown").hover(            
        function() {
            $('.dropdown-menu', this).not('.in .dropdown-menu').stop( true, true ).slideDown("low");
            $(this).toggleClass('open');        
        },
        function() {
            $('.dropdown-menu', this).not('.in .dropdown-menu').stop( true, true ).slideUp("low");
            $(this).toggleClass('open');       
        }
    );
});

You can edit the slideDown and slideUp methods to be slideUp(0) (no quotes inside as it's a numeric value) instead of 'slow'. This should essentially disable the animation.

Twitter Bootstrap 3 - dropdown menu in nav-collapse

Try something like:

$('.profile-collapse').on('show.bs.collapse',function()
{   
$('.profile-collapse .dropdown > a').hide();
});
$('.profile-collapse').on('shown.bs.collapse',function()
{
    $('.profile-collapse .dropdown').addClass('open');

});
$('.profile-collapse').on('hide.bs.collapse',function()
{
    $('.profile-collapse .dropdown').removeClass('open');
    $('.profile-collapse .dropdown > a').show();
});

add after the boostrap JS or on document ready

update

My concern with this solution is that it seems to animate slowly or
lag if you will. (@michael-stramel)

Toggle the navbar be handled by the collapse plugin. This plugin preform a time consuming css3 transition on collapse. For futher information see: Turning off Twitter Bootstrap Navbar Transition animation

In this case try:

.profile-collapse.collapsing {
  -webkit-transition: height 0.0001s ease;
          transition: height 0.0001s ease;
}

Make Bootstrap collapse animation optional

I used toggleClass() to add and remove the collapse-anim-off class.

<!DOCTYPE html><html><head>  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  <style>  .collapse-anim-off {   -webkit-transition: none;   transition: none;  display: none;  }  </style>  <script> $(document).ready(function(){     $("#collapse-anim").click(function(){         $("#demo").toggleClass("collapse-anim-off");     }); });</script></head><body>
<div class="container">  <h2>Simple Collapsible</h2>  <button type="button" class="btn btn-info" id="collapse-anim">Collapse Animation</button>  <br>  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>  <div id="demo" class="collapse">    Lorem ipsum dolor sit amet, consectetur adipisicing elit,    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.    fsldfjslkfjsldkfjsldjflsflsdkjflksdjflksjdflksdf.sklfjsldkjflsdjflsjflksdjflsjflsjdf    flksdfskfjsldkfjslfjslfjsdlkfjsdlfjsdlfjslfjsldkfjsldfjsldkfjlsdjflsdjflsjfslkdfjsd    fsfsjdlfjsdfjlsdfsdfsfsdfsfsfsdfsdfsdfsdfsdfsdfsdfsdfsfsdfsdfsdfsdfsdfsdfsdfsdfsfsdfs    Lorem ipsum dolor sit amet, consectetur adipisicing elit,    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.    fsldfjslkfjsldkfjsldjflsflsdkjflksdjflksjdflksdf.sklfjsldkjflsdjflsjflksdjflsjflsjdf    flksdfskfjsldkfjslfjslfjsdlkfjsdlfjsdlfjslfjsldkfjsldfjsldkfjlsdjflsdjflsjfslkdfjsd    fsfsjdlfjsdfjlsdfsdfsfsdfsfsfsdfsdfsdfsdfsdfsdfsdfsdfsfsdfsdfsdfsdfsdfsdfsdfsdfsfsdfsLorem ipsum dolor sit amet, consectetur adipisicing elit,    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.    fsldfjslkfjsldkfjsldjflsflsdkjflksdjflksjdflksdf.sklfjsldkjflsdjflsjflksdjflsjflsjdf    flksdfskfjsldkfjslfjslfjsdlkfjsdlfjsdlfjslfjsldkfjsldfjsldkfjlsdjflsdjflsjfslkdfjsd    fsfsjdlfjsdfjlsdfsdfsfsdfsfsfsdfsdfsdfsdfsdfsdfsdfsdfsfsdfsdfsdfsdfsdfsdfsdfsdfsfsdfs  </div></div>
</body></html>