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.
How can I override bootstrap styles on page I want without editing original css?
It’s best to override the styles as you may want to update the Boostrap CSS in future, especially since Boostrap 5 alpha is out and we will soon be updating from Bootstrap 4. Simply add it to your style.css or custom.css which you can call in your
functions.php
. You can override them as well in Customizer CSS, although the latter is the preferred way to implement this.The code above applies for bootstrap 4.0 or other version?
This applies for Bootstrap 4, although it will also work with Bootstrap 3.
I have used bootstrap starter template and responsible navbar from docs and then I have tried your code and there’s a problem with displaying navbar items. Have a look please: https://codepen.io/js1200/pen/MWjgdrj
Ok. I’ve fixed it. Just add background:white to .navbar-collapse class and add transition:height 0s to .navbar-collapse.collapsing class. Thanks
Sorry for the late reply, glad you solved it! : )
thanks a lot