I attempted to modify the Bootstrap Toggle Menu slide effect from top to bottom to left to right. You can view the website here:
After experimenting with various CSS codes (I prefer using pure CSS for this effect), I finally discovered this one:
.collapsing {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition-property: height, visibility;
transition-property: height, visibility;
-webkit-transition-duration: 0.35s;
transition-duration: 0.35s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
.collapsing.width {
-webkit-transition-property: width, visibility;
transition-property: width, visibility;
width: 0;
height: auto;
}
While it is functioning as intended, I noticed a slight delay when clicking on the menu before it fully opens.
Is there a way to make the transition smoother?
=== UPDATE === I have integrated Jasny's Bootstrap ()
The Slide In menu slide effect is available, but unfortunately only functions for viewport widths below 998px. Is there a workaround to enable the 'offcanvas-sm' to work on all viewports?