How to slide nav bar from left instead from top?

Question

Bootstrap supports toggling a navbar from the top. How can I slide it from the left when the screen-size is small?

For example:

In the screenshot pr

Answer 1

Please refer this CODEPEN. The following important points to note:

• Animate.css library required. Specifically the slideInLeft and the slideOutLeft animations.

• Work with dropdown instead of the collapse component of Bootstrap.

• Set the dropdown-menu element static by applying the class position-static on it.

• Leverage the show class that is applied on the dropdown element when the dropdown-menu is shown.

• Leverage left CSS property to carry out the transition. Basically, we'll set left:-100% on .dropdown.show .dropdown-menu and we'll set left:0px on .dropdown .dropdown-menu

Screenshot:

NOTE : You can tryout other animations for the dropdown-menu from animate.css.

Good Luck...