Bootstrap collapse has a jumpy transition

Question

I have a problem with the transition of the bootstrap navbar. the collapse has a jumpy transition when the collapsing element has padding

I googled this issue and it seems that the problem is the padding:

.menu-menu-container{
    padding: 100px 30px 60px 30px;
    background-color: yellow;
}

in fact if i remove the padding from menu-menu-container element, the animation works well, and it is very smooth

this i my codepen > http://codepen.io/mp1985/pen/EyOJYE

How can I achieve the same result without this weird issue?

any help, suggestion or advice?

Answer 1

The issue is caused by the padding of the container you are collapsing. It complicates the calculation of the height by collapse.js

Example:

HTML

    <div class="collapsible-div padding-values">
      // YOUR CONTENT
    </div>

CSS

.padding-values{
   padding: 20px 40px 30px;
}

this will be fixed if you move the padding to an inner container:

HTML

<div class="collapsible-div">
  <div class="new-container padding-values">
    // YOUR CONTENT
  </div>
</div>