I am learning BS5, and I have a problem with the navbar side.

I followed this tutorial and example : https://www.codeply.com/p/LXYndDByBf

As you can see, the transition is fluid when the button "menu" is clicked.

I have done exactly the same (except the icons) here : https://template-admin-dom.herokuapp.com/3

And as you can see, the transition is not the same. And however, it is exactly the same code.

Can you inspect the code ? Perhaps I need some more js scripts ? (but I do not think so)

CodePudding user response：

It's an issue with the version 5.0.2 of Bootstrap. Use the version 5.1.3, and your animation issue will be resolved. JSFiddle

Links:

CSS: <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

JS: <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

Edit: The original Codeply link seems to use 5.1.0, so I suppose the issue was solved in that version itself.