Do you want to change the default behaviour of the Bootstrap 4 navbar? Well, you’re at the right place. The default menu for mobile is a hamburger menu when clicked it will slide to the menu items.
There are various ways to do this using jQuery/JavaScript but the best way, in our opinion, is just using plain old CSS.
So to do this, we can override the transition styles for the navbar-collapse as follows:-
Mobile Nav – Slide from Left
@media (max-width: 768px) {
.navbar-collapse {
position: absolute;
top: 54px;
left: 0;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
width: 100%;
}
.navbar-collapse.collapsing {
height: auto;
-webkit-transition: left 0.3s ease;
-o-transition: left 0.3s ease;
-moz-transition: left 0.3s ease;
transition: left 0.3s ease;
left: -100%;
}
.navbar-collapse.show {
left: 0;
-webkit-transition: left 0.3s ease-in;
-o-transition: left 0.3s ease-in;
-moz-transition: left 0.3s ease-in;
transition: left 0.3s ease-in;
}
}
Mobile Nav – Slide from Right
@media (max-width: 992px) {
.navbar-collapse {
position: absolute;
top: 54px;
right: 100%;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
width: 100%;
transition: all 0.3s ease;
display: block;
}
.navbar-collapse.collapsing {
height: auto !important;
margin-right: 50%;
transition: all 0.3s ease;
display: block;
}
.navbar-collapse.show {
right: 0;
}
}
We hope this quick tutorial has helped you. If you require any further assistance just leave a comment below.
