Css code to make bootstrap navbar collapse left to right
@media (max-width: 992px) {
.navbar-collapse {
position: fixed;
top: 0;
left: 0;
padding: 0px 15px 15px 15px;
width: 75%;
height: 100%;
}
.navbar-collapse.collapsing {
left: -75%;
transition: height 0s ease;
}
.navbar-collapse.show {
left: 0;
transition: left 500ms
ease-in-out;
}
.navbar-toggler.collapsed ~ .navbar-collapse {
transition: left 500ms
ease-in-out;
}
}
css code for bootstrap navbar collapse from right to left ,
dont forget to keep the navbar toggler z-index vlaue bigger then collpase z-index vlaue
@media (max-width: 992px) {
.navbar-collapse {
position: fixed;
top: 0;
right: 0;
padding: 0px 15px 15px 15px;
width: 75%;
height: 100%;
}
.navbar-collapse.collapsing {
right: -75%;
transition: height 0s ease;
}
.navbar-collapse.show {
right: 0;
transition: right 500ms
ease-in-out;
}
.navbar-toggler.collapsed ~ .navbar-collapse {
transition: right 500ms
ease-in-out;
}
}
c202
